本文共 2661 字，大约阅读时间需要 8 分钟。

vue选择网络模块的比较

jsonp介绍

了解jsonp

jsonp的封装

为什么选择axios

axios的全部请求方式

怎样发送并发请求

axios.all([  axios({       url:'/home/multidata'  }),  axios({       url:'/home/data',    params:{         type:'sell',      page:2    }  })]).then(axios.spread((res1,res2)=>{     console.log(res1);  console.log(res2);}))

怎么进行全局配置

使用全局的配置请求axios.defaults.baseURL = 'http://123.207.32.32:8000'axios.defaults.timeout= 5000axios.all([  axios({       url:'/home/multidata'  }),  axios({       url:'/home/data',    params:{         type:'sell',      page:2    }  })]).then(axios.spread((res1,res2)=>{     console.log(res1);  console.log(res2);}))

有哪些常用的配置选项

学会创建axios实例

创建axios的实例const instance1 = axios.create({     baseURL:'http://123.207.32.32:8000',  timeout:5000})instance1({     url:'/home/multidata'}).then(res=>{     console.log(res)})instance1({     url:'/home/data',}).then(res=>{     console.log(res);  })

封装axios

由于不可能在每个文件都导入axios，分别进行信息的处理，这样不便于修改和维护项目，需要对axios代码进行封装

import axios from 'axios'export function request(config){       const instanse1 = axios.create({           baseURL:'http://123.207.32.32:8000',        timeout:5000    })    // 发送网络请求    instanse1(baseConfig)    .then(res=>{           // console.log(res);        config.success(res)    })    .catch(err=>{           // console.log(err);        config.falure(err)    })}

这样之后在任意一个文件就可以导入并调用封装函数

import {   request} from './network/request'request({     url:'/home/multidata'},res=>{     console.log(res);},err=>{     console.log(err);})request({     baseConfig:{     },  success(res){     },  falure(err){     }})

学会使用axios拦截器

export function request(config) {       return new Promise((resolve, reject) => {           const instanse1 = axios.create({               baseURL: 'http://123.207.32.32:8000',            timeout: 5000        })        // axios的拦截器        // 请求拦截        instanse1.interceptors.request.use(backMsg =>{               console.log(backMsg);            // 1，如果config中的一些信息不符合要求 就可以使用拦截改变config            // 2,比如发送网络请求是，都希望在界面中显示一个图标            // 3，某些网络请求（比如登录（token）），必须携带一些信息            // 已经拦截config需要从新返回            return config        },err=>{               console.log(err); //请求没发出去就会显示这个错误        })        // 响应拦截       instanse1.interceptors.response.use(res=>{           console.log(res);        return res.data       },err=>{              console.log(err);                  })        // 发送网络请求        instanse1(config)            .then(res => {                   // console.log(res);                resolve(res)            })            .catch(err => {                   // console.log(err);                reject(err)            })        // return instanse1(config)    })}