Axios库

作者: 凉城十月 | 来源:发表于2020-09-19 20:14 被阅读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就是上面拦截器返回的东西,可以在拦截器里设置路由。

相关文章

  • 由ajax到axios(koa项目)

    什么是axios? 其实axios是ajax的升级版,axios库是一个改进ajax底层的库,它可以把原生的aja...

  • vue封装ajax请求

    // 用来发请求的库 import axios from 'axios'; import { Toast } fr...

  • React初级1

    使用axios react 动画库

  • Vue结合网络数据开发应用axios+vue

    (一)axios网络请求库 为了使用这个js库,应该先进行倒包 axios.get(地址?查询字符串).then(...

  • axios(VUE主流)

    axios库 http://www.axios-js.com/ axios的使用方式 第一种混入模式: docum...

  • axios的基本使用

    axios的安装和引入 Axios 是一个基于 promise 的 HTTP 库,在vue中使用axios进行异步...

  • axios源码解析

    Axios是近几年非常火的HTTP请求库,官网上介绍Axios 是一个基于 promise 的 HTTP 库,可以...

  • 4:使用axios库请求数据

    文档可查看:https://www.npmjs.com/package/axios; 1:axios库的使用 参数...

  • 8-7、静态方法扩展

    需求 官方axios库实现了axios.all、axios.spread等方法,它们的用法如下: 实际上,axio...

  • axios

    axios axios 是一个专注于网络请求的库! axios 的基本使用:繁 发送get请求: 发送post请求...

网友评论

      本文标题:Axios库

      本文链接:https://www.haomeiwen.com/subject/nklyyktx.html