vue项目--axios基本使用

1. axios 认识

• Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
• 特点：
  从浏览器中创建 XMLHttpRequests
  从 node.js 创建 http 请求
  支持 Promise API
  拦截请求和响应
  转换请求数据和响应数据
  取消请求
  自动转换 JSON 数据
  客户端支持防御 XSRF

2. axios发起网络请求的几种方式

axios.request(config)
axios.get(url[, config]) * 发起GET请求
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]]) * 发起POST请求
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
等等.

3. axios 配置默认值/default

• axios.defaults.baseURL = ‘https://api.example.com’ 配置各个请求中的默认路径 ，会自动拼接到url前面 常用
• axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN; 配置默认的token
• axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’ 配置默认的Content-Type

4. 请求后的服务器的响应结构

{
  // `data` 由服务器提供的响应
  data: {},
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
  // `headers` 服务器响应的头
  headers: {},
   // `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

5. axios请求参数问题

a. 参数的存放位置

get请求的参数以键值对的方式跟在url后面的，而post请求的参数是以键值对的方式在请求体里的

post请求传参时注意：

1. 在请求头设置Content-Type字段的值

//可以针对post请求做一个全局的设置，避免每个请求都要设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

原因： 只有当’contentType’为"application/x-www-form-urlencoded",tomcat才会去读取post请求在请求体中传递的数据。
2. 用Qs.stringify()将对象序列化成URL的形式：

import qs from 'qs' //qs是axios里面自带的，所以直接引入就可以了
data = qs.stringify(data)

原因： post请求参数是以键值对的形式存在请求体里，用Qs.stringify()就是把传入的对象转换为键值对。

4. 拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

• 请求拦截器

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

• 响应后的拦截器

axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

• 若想在某个效果中移除拦截器

// 给拦截器命名
var myInterceptor = axios.interceptors.request.use(...);
//用eject移除拦截器
axios.interceptors.request.eject(myInterceptor);

5. axios 在vue项目中的应用

npm 安装axios

npm install axios

在main.js 中引入

npm axios from 'axios'

将axios挂载到vue原型

Vue.prototype.$http = axios

之后请求数据就可以直接用 this.$http 结合 await 和 async 来请求数据
eg：

 async myData() {
     // 发起一个get请求 
      const data = await this.$http('url')
 }