Axios库

2020-09-19  本文已影响0人  凉城十月

Axios是一个基于Promise的HTTP库,简单的讲就是可以发送get、post请求。
比如:

axios.post()
axios.get()
axios.put()
axios.patch()
axios.delete()

JQuery的ajax功能,在Vue中就是用axios实现。axios比JQuery的ajax功能更多,除了ajax功能之外,其他的功能也更专注。也正是由于Vue、React等框架的出现,JQuery正式退役。

Axios的特性

1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 XSRF 攻击

Axios如何使用?

只要安装好了或者引用正确就可以使用,最经常使用的方法有:
使用npm:

$ npm install axios

使用bower:

$ bower install axios

使用yarn:

$ yarn add axios

使用jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios常见问题

1.如何用 axios GET 请求 /xxx?id=1(查询axios文档即可得知答案)

答:
1)常规写法

axios.get('/user?ID=12345')

2)上面的请求也可以写成:

axios.get('/user', {
    params: {
      ID: 12345
    }
})

3)axios(config)配置项

axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})

4)axios(url[, config])

axios('/user/12345');
2.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

的作用是什么?
答:这是在配置全局默认值。不发送 post 请求,只是设置所有 post 请求的默认请求头,默认 Content-Type 的值为 'application/x-www-form-urlencoded'。
其他的全局默认值相同道理:

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
3.axios.interceptors 是做什么用的?

答:用来拦截请求和响应,可以让程序员任意篡改请求和响应。

axios.interceptors.response.use(function(response){
  let {method, url } = response
  if( method === 'get' && url === '/book/1'){ //还可以设置路由
    response.data = {
        'name': 'Lucia'
      }
  }  
  return response
})

这样设置过后,

  axios.get('/book/1')
    .then((response)=>{
      console.log(response) 
    })

这里的response就是上面拦截器返回的东西,可以在拦截器里设置路由。

上一篇 下一篇

猜你喜欢

热点阅读