axios的基本使用_axios使用

axios 是什么?

Axios 是专注于网络数据请求的库。

相比于原生的 XMLHttpRequest 对象，axios 简单易用。

相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

文档: https://github.com/axios/axios

axios 特点:

1. 基于 xhr + promise 的异步 ajax 请求库

2. 浏览器端/node 端都可以使用

3. 支持请求／响应拦截器

4. 支持请求取消

5. 请求/响应数据转换

6. 批量发送多个请求

axios常用语法：

axios(config): 通用/最本质的发任意类型请求的方式

axios(url[, config]): 可以只指定 url 发 get 请求

axios.request(config): 等同于 axios(config)

axios.get(url[, config]): 发 get 请求

axios.delete(url[, config]): 发 delete 请求

axios.post(url[, data, config]): 发 post 请求 

axios.put(url[, data, config]): 发 put 请求

axios.defaults.xxx: 请求的默认全局配置

axios.interceptors.request.use(): 添加请求拦截器

axios.interceptors.response.use(): 添加响应拦截器

---------------------------------------------------------------------------------

axios.create([config]): 创建一个新的 axios(它没有下面的功能)

axios.Cancel(): 用于创建取消请求的错误对象

axios.CancelToken(): 用于创建取消请求的 token 对象

axios.isCancel(): 是否是一个取消请求的错误

axios.all(promises): 用于批量执行多个异步请求

axios.spread(): 用来指定接收所有成功数据的回调函数的方法

基本使用：

axios发送get请求：
axios.get('url地址', { params: {请求的参数对象}}).then(function(res){
        //.then()表示成功的回调
        console.log(res.data)   //res.data 是服务器返回的数据,会自动转为js对象格式
    })
-------------------------------------------------------------------------------------------
axios发送post请求：
axios.post('url地址', {要提交到服务器的数据}).then(function(res){
        console.log(res.data)   //res.data 是服务器返回的数据
    })
-------------------------------------------------------------------------------------------
直接使用axios发起请求:
axios({
     method: '请求类型',
     url: '请求的URL地址',
     data: { POST数据  },    //POST 数据要通过data属性提供
     params: { GET参数 }    //GET参数要通过params属性提供
     }) .then(function(res){
         console.log(res.data)
     })

 默认配置：

  axios.defaults.method="post" //设置默认的请求类型
  axios.defaults.baseURL="XXX" //设置默认url地址
  axios.defaults.XXX=XXX   //设置XXX的默认配置为XXX
  axios({
       ....
  }).then(function(res){
      console.log(res.data)
     })

axios创建实例发送请求：

const a=axios.create({
                       //创建实例对象
})
a({
   method:"post",
   url:"xxx",
   data:{}
}).then(function(res){
   console.log(res)
})                       //这里实例对象与axios功能几乎是一样的
 //axios 实例只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的

axios请求响应结果的结构：

config:配置对象

data:响应体结果

headers:响应体信息

request:原生ajax对象

status:响应状态码

statusText:响应状态字符串

axiios取消请求:

 var one=document.getElementById("one")
 var two=document.getElementById("two") //获取按钮
 let cancel=null   //声明全局变量
 //发送请求
 one.onclick=function(){
     axios({
         method:"post",
         url:"xxx",
         //添加配置对象的属性
         cancelToken:new axios.CancelToken(function(c){
             cancel=c   //将c的值赋值给cancel
         })
     }).then(function(res){
        console.log(res.data)
     })
  }
 //取消请求
 two.onclick=function(){
     cancel()
 }

axios拦截器(可以在发送请求时或响应的时候做一下操作)：

        //设置请求拦截器
        axios.interceptors.request.use(function (config) {
            console.log("请求拦截器成功")       //condig是配置对象
            return config;
        }, function (error) {
            console.log("请求拦截器失败")
            return Promise.reject(error);
        });
        //设置响应拦截器
        axios.interceptors.response.use(function (response) {
            console.log("响应拦截器成功")         //response是响应结果
            return response;
        }, function (error) {
            console.log("响应拦截器失败")
            return Promise.reject(error);
        });
        axios({
            method:"get",
            url:"url地址"
        }).then(res=>{
            console.log(res)
        })
        //分别输出：请求拦截器成功   响应拦截器成功   res的值

        //设置请求拦截器
        axios.interceptors.request.use(function (config) {
            console.log("请求拦截器成功")
            throw "出问题了"            //如果抛出异常会返回一个失败的promise
        }, function (error) {
            console.log("请求拦截器失败")
            return Promise.reject(error);
        });
        //设置响应拦截器
        axios.interceptors.response.use(function (response) {
            console.log("响应拦截器成功")
            return response;
        }, function (error) {
            console.log("响应拦截器失败")
            return Promise.reject(error);
        });
        axios({
            method:"get",
            url:"http://www.liulongbin.top:3006/api/getbooks"
        }).then(res=>{
            console.log(res)
        }).catch(res=>{
            console.log(res)
        })
        //分别输出：请求拦截器成功   响应拦截器失败   出问题了

请求拦截器失败的回调什么时候会触发：

响应拦截器成功的回调什么时候会触发：