Vue项目中axios的使用

• 下载

npm install axios

• 引入，在main.js中

import http from 'axios'

• axios不是一个插件，使用时要把他放在vue的原型上

Vue.prototype.$http=http

axios的二次封装

• index.js文件

export default{
    baseUrl: {
        dev: '/api/',
        pro:''
    }
}

• axios.js文件

import axios from 'axios'
import config from '../config/index.js'

const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : cosnfig.baseUrl.process

class HttpRequest{
    constructor(baseUrl) {
        this.baseUrl = baseUrl
    }

    getInsideConfig() {
        const config = {
            baseUrl: this.baseUrl,
            header:{}
        }
        return config
    }
    interceptors(instance) {
        //添加请求拦截器
        instance.interceptors.request.use(function (config) {
            //在发送请求之前做些什么
            return config
        }, function (error) {
            //对错误请求做些什么
            return Promise.reject(error)
        });
        //添加响应拦截器
        instance.interceptors.response.use(function (response) {
            //对响应数据做点什么
            return response
        }, function (error){
            //对响应错误做点什么
            return Promise.reject(error)
        })
    }
    request(options) {
        const instance = axios.create()
        options = { ...this.getInsideConfig(), ...options }
        this.interceptors(instance)
        return instance(options)
    }
}

在后端没有写好接口时，前端先使用mock模拟数据，aioxs封装统一处理请求接口，页面就能正常的进行网络请求了