vue项目中初始化请求

277 阅读1分钟

1.安装axios到生产依赖

yarn add axios -S

2.创建文件src>utils>request.js

 //对axios进行二次封装
 import axios from "axios"
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

 //得到了axios对象并且配置信息
 const request = axios.create({
     // 请求配置参考: https://github.com/axios/axios#request-config
     // 根据不同环境设置 baseURL, 最终发送请求时的URL为: baseURL + 发送请求时写URL ,
     // 比如 get('/test'), 最终发送请求是: /dev-api/test
     // baseURL: '/dev-api',
     baseURL: '/', //跨域用的基础路径
     timeout: 12000 // 请求超时超过5秒钟动态请求减少性能浪费
 })
 console.log("request111",request.get);
 export default request // 导出 axios 对象

3.在src>api>login.js文件中

import request from "../utils/request"
    function login(login_name	, password) {
     // console.log('request.post',request.post)
     // return request.post("dev-api/login", {
     //   login_name,
     //   password
     // });
     return request.post("dev-api/login", `login_name=${login_name}&password=${password}`);
}

export default {
 login
}

4.在某个vue文件中引入并且调用

<script>

import user from '../api/login.js';
methods: {
    login(){
        var encipherment_password = window.btoa(password)
        user.login(userName, encipherment_password)
        .then(res=>{
          console.log('res',res)
        })
    }
}
</script>