axios知识点

axios并发请求：
    axios.all(
        [
            this.getAllTask(),// 请求1
            this.getAllCity()// 请求2
        ])
      .then(axios.spread(function(allTask, allCity) {
        console.log('请求1结果', allTask)
        console.log('请求2结果', allCity)
      }))

axios相关配置：
    axios.create({
        baseURL: "",// 请求的域名、基本地址
        timeout: 1000,// 请求超时时长，单位ms
        url: "",// 请求路径
        method: "get、post、put、patch、delete", //请求类型
        headers: {},// 请求头
        params: {}, //参数，请求参数会拼接在URL上
        data: {}, //参数，请求参数放在请求体里
    })
    
    配置形式：
        1、axios全局配置：配置默认值，一般baseUrl，timeout两个参数
            axios.default.baseUrl="";
        2、axios实例配置：创建实例后配置参数
            let instance = axios.create({})
            instance.default.baseUrl="";
        3、axios请求配置：发起请求的时候添加配置参数
            let instance = axios.create({})
            instance.get("", {timeout: 5000})
    优先级；axios请求配置 > axios实例配置 > axios全局配置

axios拦截器

　　const service = axios.create({

    　　　baseURL: process.env.BASE_URL

　　});

　　// 请求拦截器

　　service.interceptors.request.use(config => {

　　　　return cofing;

　　},error => {

　　　　Promise.reject(error);

　　})

　　// 请求响应拦截器

　　service.interceptors.response.use(response=> {

　　　　return response;

　　},error => {

　　　　return Promise.reject(error);

　　})

 

axios封装

　　import axios from 'axios'

let instance = axios.create({
    baseURL: 'http://localhost:8080/api',
    timeout: 1000
})
    const Http = {};// 包裹请求方法的容器
    // async作用：编码进入回调地狱
    Http[key] = async function(
        params,
        isFormData=false,// 标识是否是form-data请求
        config={} // 配置参数
    ) {
        let url = api.url;
        let newParams = {};
        // content-type是否是form-data的判断
        if(params && isFormData) {
            newParams = new FormData();
            for(let i in params) {
                newParams.append(i, params[i]);
            }
        } else {
            newParams = params;
        }
        let response = {}; // 请求的返回值

　　 config.params = newParams;
        try {
            response = await instance[api.method](url, config)
        } catch(err) {
            response = err;
        }
        
        return response;// 返回响应值
}

// 拦截器的添加
instance.interceptors.request.use(config=>{
    // 发起请求前做些什么
    Toast.loading({
    })
    return config;
},err => {
    // 请求失败
    Toast.clear();
    Toast("请求失败");
})

// 响应拦截器
nstance.interceptors.response.use(res=>{
    Toast.clear();
    return res.data;
},err => {
    // 响应失败
    Toast.clear();
    Toast("请求失败");
});

export default Http

 

 

Axios封装实例

　　const CONTACT_API = {
    getContactList: {
        method: 'get',
        url: '/contactList'
    },
    // 新建联系人，form-data形式
    newContactForm: {
        method: 'post',
        url: '/contact/new/form
    },
    // 新建联系人，application/json形式
    newContactJson: {
        method: 'post',
        url: '/contact/new/json
    },
    
    // 编辑联系人
    editContact: {
        method: 'put',
        url: '/contact/edit
    },
    // 删除联系人
    delContact: {
        method: 'delete',
        url: '/contact/delete
    }
}

export default CONTACT_API;




import axios from 'axios'
import service from './contactApi'


// service 循环遍历输出不同的请求方法
let instance = axios.create({
    baseURL: 'http://localhost:8080/api',
    timeout: 1000
})
const Http = {};// 包裹请求方法的容器
for(let key in service) {
    let api = service[key];// url
    // async作用：编码进入回调地狱
    Http[key] = async function(
        params,
        isFormData=false,// 标识是否是form-data请求
        config={} // 配置参数
    ) {
        // let res = null;
        // try {
        //     res = await axios.get('url');
        //  catch(err) {
        //     res = err;//捕捉catch内容
        // }
        let url = api.url;
        let newParams = {};
        // content-type是否是form-data的判断
        if(params && isFormData) {
            newParams = new FormData();
            for(let i in params) {
                newParams.append(i, params[i]);
            }
        } else {
            newParams = params;
        }
        // 不同的请求，不同的判断
        let response = {}; // 请求的返回值
        if(api.method === 'put'
            || api.method === 'post'
            || api.method === 'patch') {
            try {
                response = await instance[api.method](url, newParams, config)
            } catch(err) {
                response = err;
            }
        } else if(api.method === 'get'
            || api.method === 'delete') {
            config.params = newParams;
            try {
                response = await instance[api.method](url, config)
            } catch(err) {
                response = err;
            }
        }
        
        return response;// 返回响应值
    }
}

// 拦截器的添加
instance.interceptors.request.use(config=>{
    // 发起请求前做些什么
    Toast.loading({
    })
    return config;
},err => {
    // 请求失败
    Toast.clear();
    Toast("请求失败");
})

// 响应拦截器
nstance.interceptors.response.use(res=>{
    Toast.clear();
    return res.data;
},err => {
    // 响应失败
    Toast.clear();
    Toast("请求失败");
});

export default Http