vue 后台管理 之 axios使用及接口拦截响应等

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

什么是axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

网址： https://www.javasoho.com/axios/index.html#axios-request-config

---

一、引入axios

npm install axios

二、axios 完整文件

import axios from "axios"   // 引入axios
import { toast } from '~/composables/util'   // 自己封装的组件
import { getToken } from '~/composables/auth' // 自己封装的组件
import store from "./store"  // store

// aixos.create 是 aixos 的配置文件，很多配置可以参考aixos官方文档
const service = axios.create({
    baseURL:import.meta.env.VITE_APP_BASE_API, // 请求的地址，不固定的
})

// request 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 往header头自动添加token
    const token = getToken()
    if(token){
        config.headers["token"] = token
    }
    return config;
  }, function (error) {
    return Promise.reject(error);
  });


// response 添加响应拦截器
service.interceptors.response.use(function (response) {
    return response.request.responseType == "blob" ? response.data : response.data.data;
  }, function (error) {
    const msg = error.response.data.msg || "请求失败"
    if(msg == "非法token，请先登录！"){
      store.dispatch("logout").finally(()=>location.reload())
    }
    toast(msg,"error")
    return Promise.reject(error);
 })
// get 和 post 方法
const $get = (url, params) => {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params,
        })
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}
// 如果不需要二次封装 get和 post
export default service



// 二次封装了post和get方法 ，如果不需要的话直接导出 service
const $post = (url, params) => {
    return new Promise((resolve, reject) => {
        axios.post(url, QS.stringify(params)) // QS.stringify(params) 是将对象 序列化成URL的形式，以&进行拼接
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}
// Post2 数据格式不用转化，且可以指定头部信息
const $post2 = (url, params, type) => {
    return new Promise((resolve, reject) => {
        axios.post(url, params, type)
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}
//下面是vue3必须加的，vue2不需要，只需要暴露出去get，post方法就可以
export default {
    install: (app) => {
        app.config.globalProperties['$get'] = $get;
        app.config.globalProperties['$post'] = $post;
        app.config.globalProperties['$post2'] = $post2;
        app.config.globalProperties['$axios'] = axios;
    }
}

三、使用 application/x-www-form-urlencoded format

• 默认情况下，axios将JavaScript对象序列化为JSON。 要以application / x-www-form-urlencoded格式发送数据，您可以使用以下选项之一
• 可以使用 qs库编码格式

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);