---

一、axios框架的基本使用

在浏览器中发送XMLHttpRequests请求
在node.js中发送http请求
支持Promise API

1.1 axios框架支持多种请求方式

1. axios(config) : 默认是get请求
2. axios.request(config)
3. axios.get(url[, config])
4. axios.delete(url[, config])
5. axios.head(url[, config])
6. axios.post(url[, data[, config]])
7. axios.put(url[, data[, config]])
8. axios.patch(url[, data[, config]])

1.2 安装axios框架

npm install axios --save

1.3 使用axios框架

1.3.1 导入

import axios from 'axios'

1.3.2 使用

axios 对应的配置是对象类型

1.3.3 axios里面的参数

• url : 根据对应的url发送请求
• method : 请求的方法, 有以下几种 : get, post

1.4 获取axios框架请求的数据

axios是支持promise的.

1.5 axios框架请求的url携带数据

二、axios框架发送并发请求

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

使用 axios.all, 可以放入多个请求的数据

**axios.all([]) 返回的结果是一个数组

使用axios.spread 可将数组 [res1, res2] 展开为 res1, res2

三、axios框架全局配置

在开发中, 很多参数都是固定的, 这时我们可以进行一些抽取, 也可以利用axios的全局配置

axios.defaults.baseURL = '123.207.32.32:8000'

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

四、axios框架常见的配置选项

• 请求地址
  • url: '/user',
• 请求类型 :
  • method: 'get',
• 请求根路径 :
  • baseURL: 'http://www.mt.com'
• 请求前的数据处理 :
  • transformRequest:[function(data){}]
• 请求后的数据处理 :
  • transformResponse:[function(data){}]
• 自定义的请求头 :
  • headers:{'Content-Type':'application/x-www-form-urlencoded'}
• URL查询对象 :
  • params: {id: 12},
• request body : post请求的时候使用
  • data: {key: 'aa'}

五、axios的实例

5.1 创建axios的实例

const instance = axios.create({ })

5.2 如果两个请求没有在同一台服务器上面

六、axios模块的封装

创建一个network文件夹, 用来封装网络模块.

6.1 使用封装后的axios模块

七、axios的拦截器

拦截器用于我们在发送每次请求或者得到响应后, 进行对应的处理.

7.1 请求的拦截

instance.interceptors.request.use(config => {
  console.log("request拦截success");
  return instance
}, err => {
  console.log("request拦截reject")
})

7.2 响应的拦截

// 拦截响应
instance.interceptors.response.use(res => {
  console.log(res);
}, err => {
  console.log(err);
})

八、解决跨域问题

1. 使用代理服务器(方式一)

使用vue-cli配置代理服务器

vue.config.js

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

2. 使用代理服务器(方式二)

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      // 匹配以/api为请求头的请求
      '/api': {
        target: 'http://localhost:5000',
        ws: true,
        changeOrigin: true
      },
    }
  }
}

这里面还有一个配置 pathRewrite
这个配置接收两参数key和value key是正则表达式
value是把正则表达式匹配的路径修改为什么

module.exports = {
  devServer: {
    proxy: {
      // 匹配以/api为请求头的请求
      '/api': {
        target: 'http://localhost:5000',
        // 把/api替换为空
        pathRewrite: {"^/api": ""},
        ws: true,  // websocket
        changeOrigin: true  // 用于控制请求头中的host值
      },
    }
  }
}