封装axios vue

1. 在src下面建立文件夹utils，创建文件request.js，添加以下代码(直接复制可用)
   // 引入axios 和 qs
import axios from "axios"
import qs from "qs"
import local from "@/utils/local";//封装的本地存储的方法

// 服务器地址
axios.defaults.baseURL = ""
axios.defaults.timeout = 5000; // 超时

// 请求拦截
axios.interceptors.request.use((config) => {

let token = local.get("t_k") || "" //取出本地token
if (token) {
config.headers.Authorization = token; // 统一在请求头携带token
}
return config;
});

// 响应拦截
// axios.interceptors.response.use((response) => {
// return response;
// });

// get请求和post请求
export default {
get(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params
}).then((response) => {
resolve(response.data);
}).catch((err) => {
reject(err)
})
})
},
post(url, params = {}) {
return new Promise((resolve, reject) => {
axios.post(url, qs.stringify(params))
.then((response) => {
resolve(response.data)
}).catch((err) => {
reject(err)
})
})
}

}
2. 在src下面建立文件夹api，创建文件account.js，添加以下代码(直接复制可用)

/**

• 项目所有请求(get和post调用方法一样)
  */

import req from "@/utils/request"

// 登录请求
export function Login(params) {
return req.post("/api/login", params)
}

// 验证码
export function VerifyCode() {
return req.get("/verify_code")
}

3. 引用示例（登录页面调用login接口）
   async LoginBtn() {
if (!(this.account && this.password && this.verify_code)) {
this.$message({
message: "Content cannot be empty",
type: "warning",
});
return false;
}
let { code, msg, data } = await Login({
account: this.account,
password: md5(this.password),
verify_code: this.verify_code,
});

   if (code == "1") {
local.set("t_k", data.token);
local.set("language", data.language);
this.$router.push("/");
}
},