初识 axios

axios 是什么？

axios 是基于 promise 的网络请求库，作用于 node.js 和浏览器中。
它是 isomorhic 的（即同一套代码可以运行在浏览器和 node.js 中）在服务端它使用原生 node.js http 模块，在客户端（浏览器）则使用 XMLHttpRequexts。

为什么选择 axios ？

选择一：

传统的Ajax 是基于XMLHttpRequest(XHR)

配置和调用方式非常混乱

选择二：

jQuery -Ajax

在使用vue搭建框架，构建项目时完全没有必要为了网络请求就引用这个重量级的框架

选择三：

Vue-resource

不再更新

选择四：

axios vue官方推荐

• 作者推荐
• 在浏览器中发送 XMLHttpRequests 请求
• 在 node.js 中发送 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据

要学习 axios 的什么内容？

1.认识 axios 网络模块
2.发送基本请求
3.axios 创建实例
4.axios 拦截器的使用

使用 axios

安装

 npm install axios

最简单的网络请求

<script>
  axios({
      url:" //",
      methods: 'get'  //get请求 或者post请求
  }).then(res => {  
          console.log(res);
      })
</script>

• axios 对象调用 get 方法
  .then() 成功回调， .catch() 失败回调。
  get 方法也可以把url 中的参数提出来单独放到一个对象中。 axios 中的 all() 方法，传入一个数组，数组元素即为函数调用，函数中即为请求调用。然后 ， then() 回调方法中调用 axios 自己的spread() 方法 .只有 url 是必须的。在请求或响应 被 then 或 catch 处理前拦截他们

基本使用

<script>
  axios({
      url: '//',
        params: {
            type:'pop',
            page:1 
        }
  }).then(res => {
      console.log(res);
  }
<script/>
//这里的params 是对象类型

//发送post请求
axios.post('/user',{
     firstName:'simon',
     lastName:'kli'
}).then(res => console.log(res))
    .catch(err => console.log(err));

//执行get请求
import axios from 'axios'
axios.default.baseURL = 'http://localhost:3000/api/products'
axios.get('/user?ID = 12345')
        .then(res => console.log(res))
        .catch(err => console.log(err));
//可配置参数的方式
 axios.get('/user',{
    params: {
        ID:12345
    }
}).then(res => console.log(res))
    .catch(err => console.log(err));

params 是添加到 url 的请求字符串中的，一般用于 get 请求，data 是添加到 请求体（body）中的，一般用于 post 请求

axios 的请求方式

axios 是基于 Promise 的，因此可以使用 Promise ApI
axios的请求方式：

axios(config)
axios.request(config)
axios.get(url [,config])
axios.post(url [,data [,config]])
axios.put(url [,data [,config]])
axios.delete(url [,config])
axios.patch(url [,data [,config]])
axios.head(url [,config])

axios 发送并发请求

有时候我们可能会需要同时发送两个请求

• 使用axios.all 可以放入多个请求的数组
• axios.all([]) 返回的结果是一个数组，使用 axios.spread可以将数组[res1.res2]展开为res1,res2

axios.all([axios({
    url:'//' ,   
}),axios ([
    url:'//',
        params: {
            type:'sell',
            page:4
        }
])]).then(axios.spread(res1,res2) =>{
        console.log(res1);
        console.log(res2);
}

设置全局配置

  axios.defaults.baseURL = '//';
  axios.defaults.timeout = 5000;

axios 实例

为避免设置全局的默认请求地址不符合想要的请求时，设置 axios 实例，设置后可以灵活使用地址

const instance1 = axios.create({
    baseURL: 'http://ssssss',
    timeout:5000
})
instance1 ({
    url: '/kkk/lll/kfse'
}).then(res => {
    console.log(res);
})
  instance1({
      url:'/sdfs/sggg',
      params: {
          type:'pop',
           page:1
       }
 })

模块封装

为避免对第三方框架的依赖，实现模块封装，避免因框架问题导致的项目出错
将网络请求的封装单独放在一个文件中利用一个媒介去使用框架，而不是每个需要请求数据的地方都去请求一次

import axios from 'axios'
export function request1(config) {
  return new Promis ((resolve,reject) => {
      const instance = axios.create({
           baseURL:'//',
            timeout: 5000 
       })  
        instance(config)
          .this(res => {
            resolve(res)
          })
          .catch(err => {
               reject(err)
          })
  })
}

使用axios 拦截器

什么是 axios 拦截器？

封装一个对象对请求成功和请求失败、响应成功和响应失败进行拦截

有什么用？

• config 中一些信息不符合服务器的要求
• 每次发送网络请求时，都希望界面中显示一个请求的图标
• 某些网络请求（比如登录（taken)) 必须携带一些特殊的信息

<script>
instance.interceptors.request.use(config =>{    
    console.log(config);
    return config  
    },err =>{ 
        console.log(err);
    })
</script>

响应拦截
<script>//对结果进行拦截
    instance.interceptors.response.use(res => {
        console.log(res);
        return res.data;
    },err => {
        console.log(err);
    })
</script>