axios-网络请求模块
基本使用
安装axios
npm install axios --save
使用
import axios from 'axios'
//第一种方式：
//get请求
axios({
url:'http://123.207.32.32:8000/home/multidata',
method:'get'//默认发送get请求,
params:{ //专门针对get请求的拼接
type:'pop',
page:1 //类似于发送url:'http://123.207.32.32:8000/home/data?type=pop&page=1'
}
}).then(res => { //axios是支持promise的，请求数据成功后，里面内部会调用resolve()方法
console.log(res) //输出请求结果
})
//post请求
axios({
method: 'post',
url: 'http://123.207.32.32:8000/home/multidata',
data: {
type: 'pop',
page: 1
}
});
//第二种方式
axios.get('http://123.207.32.32:8000/home/multidata',{
params:{
type:'pop',
page:1
}
}).then(res => { conole.log(res) })
//第三种方式
axios.post('http://123.207.32.32:8000/home/multidata',{
type:'pop',
page:1
}).then(res => { console.log(res) })
axios发送并发请求
发送多个请求，并且这多个请求都完成时，才能进行下一步操作
axios.all([axios({
url:'http://123.207.32.32:8000/home/multidata'
}),axios({
url:'http://123.207.32.32:8000/home/data',
params:{
type:'sell',
page:5
}
})])
.then(results = > {
console.log(results)//输出两个请求的结果，放到一个数组里的
console.log(results[0])
console.log(results[1])
})
还提供了另外一种方式获取请求结果
axios.all([axios({
url:'http://123.207.32.32:8000/home/multidata'
}),axios({
url:'http://123.207.32.32:8000/home/data',
params:{
type:'sell',
page:5
}
})])
.then(axios.spread((res1,res2)=>{
console.log(res1)
console.log(res2)
}))
axios的配置信息相关
全局配置
axios.all([axios({
baseURL:'http://123.207.32.32:8000',
url:'/home/multidata'
}),axios({
baseURL:'http://123.207.32.32:8000',
url:'home/data',
timeout:5000, //请求超时时间
params:{
type:'sell',
page:5
}
})])
.then(results = > {
console.log(results)//输出两个请求的结果，放到一个数组里的
console.log(results[0])
console.log(results[1])
})
在上面的示例中，我们的baseURL是固定的
事实上，在开发中可能有很多参数是固定的
这个时候我们可以进行一些抽取，也可以利用axios的全局配置
axios.defaults.baseURL = '127.207.32.32:8000'
axios.default.timeout = 5
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.all([axios({
url:'/home/multidata'
}),axios({
url:'home/data',
params:{
type:'sell',
page:5000
}
})])
.then(results = > {
console.log(results)
console.log(results[0])
console.log(results[1])
})
常见的配置选项
请求地址url: ‘/user’,
请求类型method: ‘get’,
请根路径baseURL: ‘http://www.mt.com/api’,
请求前的数据处理 transformRequest:[function(data){}],
请求后的数据处理 transformResponse: [function(data){}],
自定义的请求头headers:{‘x-Requested-With’:‘XMLHttpRequest’},
URL查询对象 params:{ id: 12 },
查询对象序列化函数 paramsSerializer: function(params){ }
request body ： data: { key: ‘aa’},
超时设置: timeout: 1000,
跨域是否带Token：withCredentials: false,
自定义请求处理：adapter: function(resolve, reject, config){},
身份验证信息：auth: { uname: ‘’, pwd: ‘12’},
响应的数据格式 json / blob /document /arraybuffer / text / stream；responseType: ‘json’,
还有很多，具体的根据请求文档去查
axios的实例和模块封装
为什么要创建axios实例呢？
当我们从axios模块中导入对象时，使用的实例是默认的实例
当给该实例设置一些默认配置时，这些配置就被固定下来了
但是后续开发中，某些配置可能会不太一样
比如某些请求需要使用特定的baseURL或者timeout或者content-Type等
这个时候，我们就可以创建新的实例，并且传入属于该实例的配置信息
遇到的情况：有两个服务器，一个服务器放首页数据，一个放分类数据。此时如果让全局配置axios.defaults.baseURL = ‘127.207.32.32:8000’ 只能默认一个服务器。该怎么办呢？
解决方法：
//创建对应的axios实例
const instance1 = axios.create({
baseURL:'http://127.207.32.32:8000',
timeout:5000
})
instance1({
url:'/home/multidate'
}).then(res => {
console.log(res)
})
instance1({
url:'/home/data',
params:{
type:'pop',
page:1
}
}).then( res => {
console.log(res)
})
//------------------------------
const instance2 = axios.create({
baseURL:'http://333.222.33.33:8000',
timeout:10000
})
我们在开发过程中一般都是通过创建axios实例
我们在真实的开发中，不可能每个组件都需要import axios from ‘axios’，这样写的项目维护起来是很难的。这时我们需要对axios模块进行封装
在src/network/request.js文件下
import axios from 'axios'
export function request(config,success,failure){
//1、创建axios的实例
const instance = axios.create({
baseURL:'http://123.207.32.32:8000',
timeout:5000
})
//发送真正的请求
instance(config)
.then(res => {
console.log(res)
success(res)
})
.catch(err => {
console.log(err)
failure(err)
})
}
还可以这样封装
import axios from 'axios'
export function request(config){
//1、创建axios的实例
const instance = axios.create({
baseURL:'http://123.207.32.32:8000',
timeout:5000
})
//发送真正的请求
instance(config.baseConfig)
.then(res => {
config.success(res)
})
.catch(err => {
config.failure(err)
})
}
还可以使用promise封装（在真实项目中推荐使用这种）
export function request(config) {
return new Promise((resolve, reject) => {
// 1.创建axios的实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// 发送真正的网络请求
//第一种
instance(config)
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
//第二种
//或直接返回return instance(config)
})
}
//xxx.vue中
import request from 'src/network/request.js'
request({
url:'/home/multidata'
}).then(res =>{
console.log(res)
}).catch(err =>{
console.log(err)
})
axios拦截器的使用
请求拦截可以做到的事情？
1.比如config中的一些消息不符合服务器的要求
2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
3.某些请求用户必须登录，判断用户是否有token，如果没有token跳转到login页面
请求拦截中错误拦截较少，通常都是配置相关的拦截
可能的错误比如请求超时，可以将页面跳转到一个错误页面中。
响应拦截中完成的事情？
响应拦截中完成的事情：
响应的成功拦截中，主要是对数据进行过滤。
响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。
使用
export function request(config) {
return new Promise((resolve, reject) => {
// 1.创建axios的实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//2.axiox的请求拦截器
instance.interceptors.request.use(config => {
console.log(config)
//1.比如config中的一些消息不符合服务器的要求
//2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
//3.某些网络请求（比如登录（token）），必须携带一些特殊的信息
return config //一定要返回
})
//axios响应拦截器
instance.interceptors.response.use(res => {
resturn res.data
},err =>{
console.log(err)
})
// 3.发送真正的网络请求
//第一种
instance(config)
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
第二种方式
import axios from 'axios'
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// 2.axios的拦截器
// 2.1.请求拦截的作用
instance.interceptors.request.use(config => {
return config
}, err => {
// console.log(err);
})
// 2.2.响应拦截
instance.interceptors.response.use(res => {
return res.data
}, err => {
console.log(err);
})
// 3.发送真正的网络请求
return instance(config)
}