基本使用

// GET
this.$axios.get("/news/list?type=gn")
  .then(res => {
  console.log(res.data.result);
})
  .catch(err => {
  console.log(err);
});

// or

this.$axios.get("/news/list", {
        params: {
            type: 'gn'
        }
    })...

// POST
this.$axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

合并请求

应用场景：必须保证两次请求都成功，e.g. 分头获取省、市的数据

执行特点：只要有一个请求失败就算失败，否则成功

语法：

先$axios.all([请求1, 请求2])
在下一个then中调用 this.$axios.spread
spread回调函数中包含与all中请求顺序一致的响应数据

this.$axios.all([
        this.$axios.get("/news/list?type=gn"),
        this.$axios.get("/news/list?type=js"),
    ])
    .then(this.$axios.spread((res1, res2) => {
        console.log(res1.data);
        console.log(res2.data);
    }))
    .catch(err => {
        console.log(err);
    });

拦截器

作用：过滤，在每一次请求与响应中、添油加醋

语法：

axios.interceptors.request.use(fn) 在请求之前
function(config) {} config 相当于 options 对象

// main.js
Axios.interceptors.request.use(function(config) {
    console.log(config);
    config.header = { xxx }
    return config;
})

拦截器操作 loading

在请求发起前open，在响应回来后close

// mint-ui库
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);

// 拦截请求
Axios.interceptors.request.use(function(config) { // 请求配置
    MintUI.Indicator.open("加载中");
    return config;
});
// 拦截响应
Axios.interceptors.response.use(function(response) { // 响应结果
  	let {
	    // `data` is the response that was provided by the server
	    data: {},
	
	    // `status` is the HTTP status code from the server response
	    status: 200,
	
	    // `statusText` is the HTTP status message from the server response
	    statusText: 'OK',
	
	    // `headers` the HTTP headers that the server responded with
	    // All header names are lower cased and can be accessed using the bracket notation.
	    // Example: `response.headers['content-type']`
	      
	    headers: {},
	
	    // `config` is the config that was provided to `axios` for the request
	    config: {},
	
	    // `request` is the request that generated this response
	    // It is the last ClientRequest instance in node.js (in redirects)
	    // and an XMLHttpRequest instance in the browser
	    request: {}
	  } = response
    MintUI.Indicator.close();
    return response;
});

token(扩展)

cookie 和 session 的机制，cookie 自动带一个字符串
cookie 只在浏览器
移动端原生应用，也可以使用 http 协议，1:可以加自定义的头、原生应用没有cookie
对于三端来讲，token 可以作为类似 cookie 的使用，并且可以通用
拦截器可以用在添加 token 上

跨域问题

跨域+post请求的时候,

开始：
- 发送的数据是对象形式{content: xxx}，默认的请求头（Access-Control-Request-Headers）变成了content-type，且值为application/json
- 带来的结果：有 OPTIONS 预检请求（浏览器自动发起）
解决：
- 调整数据以字符串形式'content=xxx'发送，引起content-type变成了 ...-www-...
- 这样就没有了那个 OPTIONS 预检请求
总结：
- 跨域 + application/json 会引起Request-Method: OPTIONS预检请求，并且浏览器自定义了一个头（提示服务器，这次的content-type较为特殊）content-type的值
- 服务器认为这是个请求，但没有允许content-type的头
- 浏览器就认为服务器不能处理这个特殊头的数据
- 浏览器抛出异常
- 在node服务器如何解决：
  - response.setHeader('Access-Control-Allow-Headers', 'content-type, 多个')
  - formdata的格式：key-value&key=value

注意：

发送请求后的 Form Data 的正确格式应该是：key=value&key-value 的形式，而不是json的形式

正确形式：
- content-type: application/x-www-form-urlencoded
- form data: content=xxxx
错误形式（这样有可能服务器解析不了，只能拿到content这个key，但是后面的内容拿不到）：
- content-type: application/json
- form data: {'content': 'xxxx'}