浅学axios --大二下第九周

axios

功能特点：

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

网络模块

Vue中发送网络请求有非常多的方式

1. 传统的Ajax是基于XMLHttpRequest(XHR)
   不使用的原因：配置和调用方式等都非常混乱，编码不够优美，所以真实开发中很少使用，而是使用jQuery-Ajax

2. 可以使用jQuery-Ajax，相对于传统的Ajax很好用
   首先明确一点，在vue的整个开发中都是不需要使用jQuery了
   原因：jQuery和Vue的代码量差不多，所以没有必要为了使用网络请求就引用这个重量级的框架

3. 官方在Vue1.x的时候，推出了Vue-resource
   这个的体积相对于jQuery小很多，但是在Vue2.0推出后，Vue作者说明去掉vue-resource，所以也不使用vue-resource

4. axios，在作者说明不再继续维护vue-resource的时候，推荐大家使用axios

JSONP最主要的原因是为了解决跨域访问的问题 有时间要看一下

axios请求方式

• axios(config) 默认是get，如果想用post，就可以给传递一个method
  里面的params就是专门针对get请求的参数拼接，这个对象内部就是参数和属性值的键值对
  如果是对post请求的话，要使用data
• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

axios并发请求

使用axios.all，可以放入多个请求的数组，数组由axios组成，处理后的数据以数组的形式通过then传出

axios.all([axios(), axios()])
.then(res => {})

对于返回的数组结果也可以通过axios.spread将数组直接展开，如：

axios.all([axios(), axios()])
.then(axios.spread((res1, res2) => {}))

全局配置

因为在开发过程中很多东西都是重复的，如果每次都写的话就会显的代码很冗余，所以就要进行一下全局配置

怎么设置全局配置呢？
就直接在js文件中进行下面的设置就好，timeout是设置超时时间，单位是毫秒

axios.defaults.baseURL = 'https://www.devtool.top'
axios.defaults.timeout = 5000

常见的配置选项

• url: 请求地址
• method: 请求类型
• baseURL: 请求根路径
• transformRequest: 请求前的数据处理
• transformResponse: 请求后的数据处理
• headers: 自定义的请求头
• params: URL查询对象

可以通过axios.create()来创建axios实例

对axios进行简单封装

import axios from 'axios'

export function request(config) {
  const instance = axios.create({
    baseURL: 'https://www.devtool.top',
    timeout: 5000
  })
  return instance(config)
}

axios.create创建出来的就是一个promise，所以就可以直接返回

如何使用axios的拦截器

一共有四种拦截器，请求成功拦截，请求失败拦截，响应成功拦截，响应失败拦截
例如：

instance.interceptors.request.use(config => {
  console.log(config);
  return config // 拦截成功后，一定要及时返回
}, err => {
  console.log(err);
})

instance.interceptors.response.use(res => {
  console.log(res);
  return res.data
}, err => {
  console.log(err);
})