# Axios

> Axios 是一个基于 promise 的 HTTP 库
>
> 简单理解: 本质上也是对原生XHR的封装, 用来替代JQuery ajax, 符合**MVVM**

中文文档:  https://axios-http.com/zh/

## 安装

```bash
$ npm install axios
```

引入

```html
<script>
improt axios from 'axios'
</script>
```

## GET请求

语法:

```js
// 无参请求
axios.get(地址) 
.then(请求成功的回调)
.catch(请求失败的回调)

// 带参请求--直接在url拼接
axios.get(地址?参数=值&参数=值.....)
.then(请求成功的回调)
.catch(请求失败的回调)

// 带参请求，使用对象来传递参数
axios.get(地址,{
	params:{参数}    //params固定写法
})
.then(请求成功的回调)
.catch(请求失败的回调)
```

示例

```js
methods: {
    getData1 () {
        axios.get('http://127.0.0.1:3000/post')
            .then(function (res) {
            console.log(res);
        })
            .catch(function (err) {
            console.log(err)
        })
    },
        getData2 () {
            axios.get('http://127.0.0.1:3000/post', {
                params: {
                    pageIndex: 1,
                    pageSize: 2
                }
            })
                .then(function (res) {
                console.log(res);
            })
                .catch(function (err) {
                console.log(err)
            })
        }
}
```

## POST请求

语法:

```js
axios.post(地址,{参数})
.then(请求成功的回调)
.catch(请求失败的回调)
```

示例

```js
methods: {
    login () {
        axios.post('http://127.0.0.1:3000/login', this.user)
            .then((res) => {
            console.log(res);
        })
            .catch((err) => {
            console.log(err);
        })
    }
}
```

## 添加token

> axios请求中添加token，应在header中添加的token，使用Authorization属性字段
> 一般在请求拦截器中添加

```
{
    url: '/sys/profile',
    method: 'POST'
    // headers: {
    //   Authorization: `Bearer ${store.getters.token}`
    // }
    // 在请求拦截器注入请求头
  }
```

## API

### axios(config)

> 可以通过向 `axios` 传递相关配置来创建请求：

```js
axios({
    method: 'get', // 设置请求方式
    // url: 'http://127.0.0.1:3000/post',
    url: '/post',// 请求资源路径
    baseURL: 'http://127.0.0.1:3000',
    params: {},//get请求方式的参数，post方式使用data
})
    .then((res) => {
    console.log(res);
})
    .catch((err) => {
    console.log(err);
})
```

### 配置默认值

### 全局默认值

```JS
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
export default axios
```

### 自定义实例默认值

```js
import axios from 'axios'
// 添加统一配置
export default axios.create({
    baseURL:'http://localhost:8080/api/v1/',
    headers:{token传递}
})
```

可用的配置

```js
/可用的配置项如下：
  // `auth` HTTP Basic Auth
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` 表示浏览器将要响应的数据类型
  // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 浏览器专属：'blob'
  responseType: 'json', // 默认值

  // `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)
  // 注意：忽略 `responseType` 的值为 'stream'，或者是客户端请求
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // 默认值

  // `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名称
  xsrfCookieName: 'XSRF-TOKEN', // 默认值

  // `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值

  // `onUploadProgress` 允许为上传处理进度事件
  // 浏览器专属
  onUploadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  // 浏览器专属
  onDownloadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

  // `maxContentLength` 定义了node.js中允许的HTTP响应内容的最大字节数
  maxContentLength: 2000,

  // `maxBodyLength`（仅Node）定义允许的http请求内容的最大字节数
  maxBodyLength: 2000,

  // `validateStatus` 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。
  // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，
  // 则promise 将会 resolved，否则是 rejected。
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默认值
  },

  // `maxRedirects` 定义了在node.js中要遵循的最大重定向数。
  // 如果设置为0，则不会进行重定向
  maxRedirects: 5, // 默认值

  // `socketPath` 定义了在node.js中使用的UNIX套接字。
  // e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程。
  // 只能指定 `socketPath` 或 `proxy` 。
  // 若都指定，这使用 `socketPath` 。
  socketPath: null, // default

  // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
  // and https requests, respectively, in node.js. This allows options to be added like
  // `keepAlive` that are not enabled by default.
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // `proxy` 定义了代理服务器的主机名，端口和协议。
  // 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。
  // 使用 `false` 可以禁用代理功能，同时环境变量也会被忽略。
  // `auth`表示应使用HTTP Basic auth连接到代理，并且提供凭据。
  // 这将设置一个 `Proxy-Authorization` 请求头，它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 请求头。
  // 如果代理服务器使用 HTTPS，则必须设置 protocol 为`https`
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // see https://axios-http.com/zh/docs/cancellation
  cancelToken: new CancelToken(function (cancel) {
  }),

  // `decompress` indicates whether or not the response body should be decompressed 
  // automatically. If set to `true` will also remove the 'content-encoding' header 
  // from the responses objects of all decompressed responses
  // - Node only (XHR cannot turn off decompression)
  decompress: true // 默认值

}
```

## 跨域请求

> axios不支持跨域请求，可以使用 vue-resource 发送跨域请求

## 拦截器

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

````js
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 例如本地的 token 未过期, 那么在config中添加token
    config.headers.Authorization = `Bearer ${store.getters.token}` // 在请求头添加token
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    // 例如可以在这里添加提示弹窗
    return response;
  }, function (error) {
    // 对响应错误做点什么
    // 例如可以对登录过期的删除旧的登录信息并跳转登录页
    return Promise.reject(error);
  });
````

## 大数字处理

> JavaScript 能够准确表示的整数范围在-2^53到 2^53之间（不含两个端点），超过这个范围，无法精确表示这个值，这使得 JavaScript 不适合进行科学和金融方面的精确计算

```js
//ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量，用来表示这个范围的上下限
Number.MAX_SAFE_INTEGER === 9007199254740991  // true
Number.MIN_SAFE_INTEGER === -9007199254740991  // true
```

```
npm i json-bigint
```

```js
import axios from 'axios'

import jsonBig from 'json-bigint'

var json = '{ "value" : 9223372036854775807, "v2": 123 }'

console.log(jsonBig.parse(json))

const request = axios.create({
  baseURL: '你接口的基础路径', // 接口基础路径

  // transformResponse 允许自定义原始的响应数据（字符串）
  transformResponse: [function (data) {
    try {
      // 如果转换成功则返回转换的数据结果
      return jsonBig.parse(data)
    } catch (err) {
      // 如果转换失败，则包装为统一数据格式并返回
      return {
        data
      }
    }
  }]
})

export default request
```

```js
//使用的时候转为字符串来使用。
jsonBig.parse(bigNumber).toString()
```