Version: Next

Axios请求与响应拦截

安装axios

npm install axios --save

新建config文件夹，新建index.js，用作全局配置
- 用来设置项目的baseUrl

export default {
    title:"lcelm",
    baseUrl:{
        dev:"http://localhost:3000",//开发的时候后台接口的地址
        pro:""//上线产品发布之后，后台接口的地址
    },
    imgBaseUrl: ''
}

新建api文件夹，新建axios.js

import axios form 'axios'
// 导入config文件夹
import config from '@/config'

// 根据当前Node环境，加载config中不同的baseUrl
// 根据项目的启动方式 server就是开发环境，build就是生产环境
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

// 定义一个类
class HttpRequest {
    // 构造方法 baseUrl配置在config/index.js中
    constructor(baseUrl) {
        this.baseUrl = baseUrl
        // 请求队列
        this.queue = {}
    }
    // 一些定死的全局配置写在这里，与外部配置进行结合
    getInsideConfig() {
        const config = {
            baseURL:this.baseUrl,
            header:{ //请求头
                // 
            }
        }
        return config;
    }
    // 拦截设置，传入实例(请求或响应实例)和url
    interceptors(instance, url) {
        // 拦截请求
        instance.interceptors.request.use((config) => {
            // 处理各种请求配置
            console.log("拦截和处理请求");
            // 携带数据
            config.data = {msg: "message"}; // 数据JSON对象
            
            return config;
        })
        // 拦截响应
        instance.interceptors.response.use((response) => {
            console.log("拦截和处理响应");
            
            return response.data;
        }, (error) => {
            console.log(error);
            return {error: "网络错误"}
        })
    }
    // 请求
    request(options) { // 传入options配置，与全局死配置config结合
        // 实现实例
        const instance = axios.create(); // 创造实例对象
        // 返回结合后的配置，将传入的配置传进全局死配置，如果配置重复，那么传入的配置会覆盖之前写的死配置
        options = Object.assign(this.getInsideConfig(), options)
        // 拦截请求
        this.interceptors(instance, option.url)
        return instance(options);
    }
}

// 调用构造方法，实例化axios对象
const axiosObj = new HttpRequest(baseUrl);

// 把实例化对象导出
export default axiosObj

新建/api/data.js，专门做Ajax请求

import axios from '@/api/axios' // 得到的就是之前导出的axiosObj对象

// 导出请求后端数据的函数
export const getBannerData = () => {
    return axios.request({ // 传入一个对象
        url: "banner",
        method: 'get'
    })    
}

在组件中调用

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {getBannerData} from '@/api/data'

export default {
  name: 'Home',
  components: {
   HelloWorld
  },
  async mounted(){ // 声明周期 异步
   let result = await getBannerData();
  }
}
</script>

Axios请求与响应拦截#

安装axios#

Axios请求与响应拦截

安装axios