文章目录
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= 5000
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实例
创建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)
})
}