VUE2封装AJAX请求

第一步先在项目中yarn add axios

第二步创建utils文件夹，里面创建request.js，在这个JS文件中引入AXIOS，和创建AXIOS的实例对象。实例对象里面需要写baseURL和timeout，然后在设置请求拦截器和相应栏截器。最后设置完成后再暴露出这个实例export default  instance

import axios from "axios";


//创建axios实例
const instance =axios.create({
    baseURL:"/api",
    timeout:'8000'
})

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    if(true){
        config.headers.token="123"
    }
    return config;
  });





// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    console.log(response);
    if (response.status === 200) {
        console.log(123)
    }
    return response;
  }, function(error) {
    console.log(error)
    if (error.response.status === 401) {
        console.log(401)
    }
  });



export default  instance 

如果需要跨域问题，需要在根目录下的vue.config.js中配置，如果没有就需要创建一个。然后写入

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    open: true,
    proxy: {
        '/api':{
            target: 'http://127.0.0.1:5000',
            changeOrigin:true,
            pathRewrite:{
                '^/api' : '' // 重写请求
            }
        }
    }
}
})

第三步在api层引入工具层的request.js，然后定义方法名，并暴露

import request from "../utils/request"

export function login(data){
    return request({
        url:'/users/checkLogin',//请求地址
        method:'post',//请求方法
        data
    })
}

最后在需要使用的页面引入