axios 介绍与使用

1.定义

Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中

2.特点

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

3.使用

• 引入axios
• 创建axios实例
• 设置请求拦截器
• 设置响应拦截器

import axios from 'axios'

// 创建 axios 实例
const request = axios.create({
    baseURL: 'https://some-domain.com/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
  }
})

/**
 * 添加请求拦截器
 */
axios.interceptors.request.use((config) => {
    // 在发送请求之前做些什么
    ```
  const token = store.getters.userToken
  if (token) {
    config.headers['Authorization'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
  }
    return config; // 放行请求
}, (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

/**
 * 添加响应拦截器
 */
axios.interceptors.response.use(function (response) {
    return response;
}, function (error) {
    // 对响应错误进行设置
    return Promise.reject(error);
});

/**
 * 使用
 */
这里request 为 axios 实例， axios.create({})获得
//get 请求（params,url中的参数)
requset({
    method: 'get',
    url: '/node/getList',
    params: {
        a: 'a'
     }
})

//post请求（请求体中参数）
requset({
    method: 'get',
    url: '/node/getList',
    data: {
        a: 'a'
     }
})

上述为axios第一种用法

二、常用的get和post别名方法

**get用法：
axios.get('url').then((res) => { }).catch((err) => { })

**get：传参**
get请求传参有两种方式，其一直接在url上拼接参数，其二使用config配置中的params属性传参。
(1)  axios.get('url?name=jpf').then((res) => { }).catch((err) => { })

(2)
axios.get('url', {
    params: {
        name: 'jpf'
    }
}).then((res) => { }).catch((err) => { })

**post用法：
axios.post('url').then((res) => { }).catch((err) => { })

**post：传参**
post传参有三种方式，
（1）post别名方法的第二个参数传递对象，

    axios.post('url', {
        name: 'jpf',
        age: 18
    }).then((res) => { }).catch((err) => { })

（2）使用config配置中的data属性传参，

    axios.post('url', null, {
        data: {
            name: 'jpf',
            age: 18
        }
    }).then((res) => { }).catch((err) => { })

（3）其三post别名方法的第二个参数传递字符串。


axios.post('url', "name=jpf&age=18").then((res) => { });

// 可以直接接收, 后台不需要有json转换对象的操作

//其中第一二个方法本质上一样，都是给后台传递application/json格式。