Axios

首先下载axios插件 "axios": "^0.27.2"

在src文件夹下创建一个utils文件夹，文件夹下面有个axios文件夹，在里面首先导入下载的axios插件

import axios  from "axios";//先导入axios
//下面是请求拦截器
axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  console.log('config',config.data)
  // const data = JSON.parse(config.data || "{}")
  config.data = qs.stringify(config.data || {})
  config.headers.token = 'xxxxx'
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

// Add a response interceptor
//下面是相应拦截器
axios.interceptors.response.use(function (response) {
  // Any status code that lie within the range of 2xx cause this function to trigger
  // Do something with response data
  console.log('响应拦截器',response)
  return response.data;
}, function (error) {
  // Any status codes that falls outside the range of 2xx cause this function to trigger
  // Do something with response error
  return Promise.reject(error);
});
export default axios; //然后把axios导出

在main.js里面把untils里面的axios导入，然后把axios方法放到vue的原型链上，在vue用的时候就可以直接this这个方法就会使用

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import axios from '@/utils/axios' //这里把utils/axios下的axios方法导入
Vue.config.productionTip = false;
Vue.prototype.$axios = axios //这里把axios放到vue的原型链上，并给这个方法名取名叫$axios,再以后用的时候就可以直接this.$axios进行调用axios方法了
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

axios的使用

1.axios返回的是一个promise对象

一般请求都是写在created 生命周期里面

 async created() {
    const res = await this.$axios.post('/hehe/json',{ us:123 }) 
//这样就会发送一个post请求，这里用到了vue.config.js配置文件里,
//可以通过这个配置文件解决跨域问题，相当于webpack里面的配置
    console.log(res)
  }
};

vue.config.js文件配置axios跨域的配置，与webpack配置相似

 devServer: {
    proxy: {
      '/hehe': { //当一级路由是/hehe的时候就会在前面拼接上下面的地址，变成http://localhost:3000/hehe/json
        target: 'http://localhost:3000', 
        changeOrigin: true,//允许改变
        pathRewrite: {
          "^/hehe": '' // http://localhost:3000/json  //把/hehe路由变成空
        }
      }
    }
  } //此时就会解决跨域问题

qs

用处：qs可以变成表单格式，通过 qs.stringify({ us:123 })，就会变成表单格式变成us=123

AXIOS拦截器

在客户端发请求的时候，并不是直接发送到后端，而是先发到请求拦截器里面，这时就可以在请求拦截器里面进行一些操作，比如你想发送表单格式的时候，你在客户端发送的是json格式，你可以在请求拦截里面把他转换成表单格式，比如你想在请求头加一个token，都可以操作

请求拦截

import qs from 'qs'
axios.interceptors.request.use(function (config) {

  console.log('config',config.data)

  config.data = qs.stringify(config.data || {}) //config.data 就是你发送的数据，通过qs改成表单格式（查询字符串），就不用再客户端操作了，可以直接在这里操作
  config.headers.token = 'xxxxx' //给请求头设置一个token
  return config; //这里把config传递到服务器
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

config里面的参数，都可以通过config.***进行修改 

 响应拦截

由于后端返回的数据会多一层data,例如本来是res.body,返回来的数据，现在成了res.data.body，因为我们可以直接获取的是data,就可以直接res.body了

axios.interceptors.response.use(function (response) {
  // Any status code that lie within the range of 2xx cause this function to trigger
  // Do something with response data
  console.log('响应拦截器',response)
  return response.data; //这里直接返回的是response.data，所以你在获取提取值的可以直接res.body，但是你要是这样返回的话res.status，就访问不到了，因为response.data没有es.status
}, function (error) {
  // Any status codes that falls outside the range of 2xx cause this function to trigger
  // Do something with response error
  return Promise.reject(error);
});

所以在配置文件里面自己配，想什么时候返回什么，自己return就行

config:内容