axios

201 阅读2分钟

1.什么是axios?

Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。 Axios主要用于想后台发起请求,还有在请求中做更多可控功能。

2.特性

  • 从浏览器中创建XMLHttpRequest
  • 从node.js创建http请求
  • 支持Promise API
  • 拦截请求和相应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF(跨站请求伪造)

3.安装

使用npm (其他方式请看官网)

npm install axios

4.案例

执行get请求

//为给定ID的user创建请求
//写法1
axios.get('/user?ID=1234')
.then(function(response){
  console.log(response)
}).catch(function(error){
   console.log(error)
})
//写法2
axios.get('/user',{params:{ID:123}})
.then(function(response){
  console.log(response)
}).catch(function(error){
   console.log(error)
})

执行post请求

axios.post('/user',{firstName:'aa',lastName:'bb'})
.then(function(response){
  console.log(response)
}).catch(function(error){
   console.log(error)
})
 

执行多个并发请求

function getUserAccount(){
  return axios.get('/user/123')
}
function getUserPermissions(){
  return axios.get('/user/123/Permissions')
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//两个请求现在都执行完成
 })
).catch(function(error){
   console.log(error)
})
 

5 axios API

可以通过想 axios传递相关配置来创建请求

axios(config)

//发送post请求
axios({
 method:'post',
 url:'/user/123',
 data:{
    firstName:'aa',
    lastName:'bb'
 }
})
// 获取远端图片
axios({
  method:'get',
  url:'http://bit.ly/3sdfs',
  responseType:'stream',
})
.then(function(response){
  response.data.pipe(fs.createWriteStream('ada_loveace.jpg'))
})

axios(url[,config])

axios('/user/12234')

6.创建实例 拦截器

创建实例 可以使用自定义配置新建一个axios实例 axios.create([config])

const instance=axios.create({
  baseURL:'https://some-domain.com/api',
 timeout:1000,
 headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}
})

拦截器 在请求或响应被then或者catch处理前拦截它们

//添加请求拦截器
instance.interceptors.request.use(function(config){
 //在发送请求之前做什么
return config;
},function(error){
//对请求错误做些什么
return Promise.reject(error)
})
//添加响应拦截器
instance.interceptors.reponse.use(function(response){
  //对响应数据做点什么
   return response ;
  },function(error){
    //  对响应错误做点什么
    return Promise.reject(error)
  }
)

拦截器流程:

image.png

axios官网:www.axios-js.com/zh-cn/docs/