Axios 简单基础应用

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于发起 HTTP 请求并处理响应结果。它运行在浏览器和 Node.js 环境中，具有简洁、灵活、易用等特点，因此广泛应用于前端开发中。

Axios 支持以下特性：

在浏览器中发送 XMLHttpRequests 请求。
在 Node.js 中发送 HTTP/HTTPS 请求。
支持 Promise API。
支持拦截请求和响应。
能够转换请求和响应数据。
提供了取消请求的方案。
自动转换 JSON 数据。

安装axios

Axios 库的安装和使用步骤如下：

使用 npm 安装 Axios 库，可以在终端或命令行中输入以下命令：
```
npm install axios
```
在需要使用 Axios 的文件中，引入 Axios 库：
```
// ES6 模块语法
import axios from 'axios';
```

直接通过script全局引用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios简单示例

发送get请求

<template>
  <el-row class="mb-4">
    <el-button type="primary" @click="axiostest">Primary</el-button>
  </el-row>
</template>
<script>
  import axios from 'axios';

  export default {
    methods: {
      axiostest() {
        axios.get('https://jsonplaceholder.typicode.com/todos/1')
          .then(response => {
            console.log(response.data); // 处理响应结果
          })
          .catch(error => {
            console.error(error); // 处理异常情况
          });
      }
    }
  }
</script>

这段代码是一个 Vue 单文件组件，包含了一个按钮和一个发送 Axios 请求的方法 axiostest。当用户点击按钮时，会调用该方法发送 GET 请求，请求一个假的待办事项数据，并将响应结果打印到控制台中。

如果要将请求参数放到查询参数（query params）中，可以将参数以键值对的形式附加到 URL 的末尾，例如：/api/endpoint?param1=value1&param2=value2。使用Axios发送带有查询参数的GET请求的代码示例如下：

import axios from 'axios';

const params = {
  param1: 'value1',
  param2: 'value2'
};

axios.get('/api/endpoint', { params })
  .then(function (response) {
    console.log(response.data); // 处理返回的数据
  })
  .catch(function (error) {
    console.log(error); // 处理错误
  });

在上面的示例中，我们定义了一个 params 对象，其中包含我们想要添加到查询参数中的键值对。然后，在调用 axios.get() 方法时，将 params 对象传递给第二个参数。Axios会自动将 params 对象转换为查询参数，并将其附加到请求的URL中。这样，最终发送的请求将是带有查询参数的GET请求。

注意：对于复杂的参数对象，Axios会自动处理嵌套对象和数组，并正确编码查询参数。

发送post请求

application/json

Axios默认的post请求格式就是 application/json，可以直接发送：

<template>
  <el-row class="mb-4">
    <el-button type="primary" @click="axiostest">Primary</el-button>
  </el-row>
</template>
<script>
  import axios from 'axios';

  export default {
    methods: {
      axiostest() {
      const post_data = {
        name: "xiaoming",
        age: 18
      };

      axios.post('http://httpbin.org/post', post_data, {
        headers: { 'Content-Type': 'application/json' }
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });


      }
    }
  }
</script>

application/x-www-form-urlencoded

Axios 发送application/x-www-form-urlencoded 格式的请求体需要将JSON数据{"name: "xiaoming", "age": "18"} 序列化为查询字符格式 name=xiaoming&age=18，Axios会自动识别请求体的格式并在请求头中声明。

<template>
  <el-row class="mb-4">
    <el-button type="primary" @click="axiostest">Primary</el-button>
  </el-row>
</template>
<script>
  import axios from 'axios';
  import qs from 'qs';

  export default {
    methods: {
      axiostest() {
        const post_data = {
        name: "xiaoming",
        age: 18
      };

      axios.post('http://httpbin.org/post', qs.stringify(post_data), {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });
      }
    }
  }
</script>

以上代码中，我们首先使用 import 语句导入了 Axios 库和 qs 库。接着，定义了一个名为 post_data 的 JavaScript 对象，它包含了名为 name 和 age 的两个属性。

然后，使用 qs.stringify() 方法将 post_data 对象序列化为 URL 查询字符串的形式，并传递给 Axios 的 data 参数作为请求体。同时，在请求头中使用 headers 参数指定了 Content-Type 为 application/x-www-form-urlencoded。

最后，使用 then() 方法和 catch() 方法分别处理响应结果和异常情况，并将响应结果输出到控制台。

需要注意的是，在发送 POST 请求时，如果请求体是 application/x-www-form-urlencoded 格式的数据，需要使用 qs 库对其进行序列化处理。在设置请求头时，需要使用 headers 参数，并将 Content-Type 设置为 application/x-www-form-urlencoded。

multipart/form-data

Axios 发送multipart/form-data 格式的请求体需要将数据变成 FormData 对象格式，Axios 会自动识别请求体的格式并在请求头中声明。

<template>
  <el-row class="mb-4">
    <el-button type="primary" @click="axiostest">Primary</el-button>
  </el-row>
</template>
<script>
  import axios from 'axios';

  export default {
    methods: {
      axiostest() {
        const formData = new FormData();
        formData.append('name', 'xiaoming');
        formData.append('age', 18);
        axios.post('http://httpbin.org/post', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(response => {
          console.log(response.data);
        }).catch(error => {
          console.error(error);
        });
      }
    }
  }
</script>

在上述代码中，我们首先使用 FormData() 构造函数创建一个新的 FormData 对象，并使用 append() 方法向其中添加两个字段，分别是名为 name 和 age 的字段。

然后，我们使用 axios.post() 方法发送 POST 请求，并将 FormData 对象作为请求体传递给 data 参数。同时，在请求头中使用 headers 参数指定了 Content-Type 为 multipart/form-data。

最后，使用 then() 方法和 catch() 方法分别处理响应结果和异常情况，并将响应结果输出到控制台。

需要注意的是，在发送 POST 请求时，如果请求体是 multipart/form-data 类型的数据，需要使用 FormData() 构造函数来创建 FormData 对象，并将其传递给 Axios 的 data 参数作为请求体。在设置请求头时，需要使用 headers 参数，并将 Content-Type 设置为 multipart/form-data。

请求头中的声明是可以省略的，如果您不指定请求头中的 Content-Type 或者使用 axios.defaults.headers 设置了默认的请求头，那么 Axios 会自动根据请求数据来设置相应的 Content-Type。

利用FormData对象上传文件

<template>
  <div>
    <input type="file" ref="fileInput" @change="uploadFile">
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.$refs.fileInput.files[0]);
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.log(error);
      });
    }
  }
}
</script>

在该示例中，当用户选择文件时，会触发uploadFile方法，在该方法中创建FormData对象，并将选定的文件通过append()方法添加到FormData对象中。然后，通过axios发送POST请求，将FormData对象作为data参数传递给axios。

向FormData对象中添加要上传的文件，通过append()方法将文件添加到FormData对象中。此处需要传入两个参数：第一个参数为key，即表单数据的名称；第二个参数为value，即要上传的文件。

axios的参数解析

axios是一个基于Promise的HTTP客户端，可用于在浏览器和Node.js中与后端进行数据交互。它可以通过两种方式来发送请求：

axios(config)

第一种方式是直接传递一个配置对象给axios函数，该对象包含了请求的各种参数，例如：

axios({
  url: 'https://api.example.com/data',
  method: 'get',
  params: {
    limit: 10,
    offset: 0
  },
  headers: {
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

上述代码中，我们通过传递一个配置对象给axios函数来发起一个GET请求，该请求会携带一个查询参数limit=10&offset=0，并附带一个Authorization头部信息。当请求得到响应时，我们可以在.then()方法中处理响应数据，当请求出现错误时，则会在.catch()方法中执行错误处理。

axios(url[, config])

第二种方式是仅传递一个url和一个可选的配置对象给axios函数，例如：

axios('https://api.example.com/data', {
  method: 'post',
  data: {
    name: 'John Doe',
    age: 30
  },
  headers: {
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

上述代码中，我们通过传递一个URL和一个配置对象给axios函数来发起一个POST请求，该请求会携带一个请求体数据{name: 'John Doe', age: 30}和一个Authorization头部信息。当请求得到响应时，我们可以在.then()方法中处理响应数据，当请求出现错误时，则会在.catch()方法中执行错误处理。

无论是哪种方式，axios都会返回一个Promise对象，因此我们可以使用Promise的链式调用来处理异步请求和响应，使代码更加简洁和易于维护。

为了方便起见，axios 为所有支持的请求方法提供了别名。

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

示例

// 下面3种写法是一样的
axios({
  method: 'get',
  url: 'http://httpbin.org/get',
  params: {name: "CloudSir"}
});

axios.request('http://httpbin.org/get', {
  method: 'get',
  params: {name: "CloudSir"}
});

axios.get('http://httpbin.org/get', {
  params: {name: "CloudSir"}
});

request config 参数

{
  // `url` 是用于请求的服务器 URL
  url: '/get',
  // `method` 是创建请求时使用的方法
  method: 'get', // 默认值
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  // 真实请求的 URL 地址是 baseURL+url，可以不设置baseURL，将完整地址放在url钟
  baseURL: 'http://httpbin.org',
  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 数组中最后一个函数必须返回一个字符串， 一个Buffer实例，ArrayBuffer，FormData，或 Stream
  // 你可以修改请求头。
  transformRequest: [function (data, headers) {
    // 对发送的 data 进行任意转换处理
    return data;
  }],
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对接收的 data 进行任意转换处理
    return data;
  }],
  // 自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // `params` 是与请求一起发送的 URL 参数
  // 必须是一个简单对象或 URLSearchParams 对象
  params: {
    ID: 12345
  },
  // `paramsSerializer`是可选方法，主要用于序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
  // `data` 是作为请求体被发送的数据
  // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
  // 在没有设置 `transformRequest` 时，则必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属: FormData, File, Blob
  // - Node 专属: Stream, Buffer
  data: {
    firstName: 'Fred'
  },
  // 发送请求体数据的可选语法
  // 请求方式 post
  // 只有 value 会被发送，key 则不会
  data: 'Country=Brasil&City=Belo Horizonte',
  // `timeout` 指定请求超时的毫秒数。
  // 如果请求时间超过 `timeout` 的值，则请求会被中断
  timeout: 1000, // 默认值是 `0` (永不超时)
  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default
  // `adapter` 允许自定义处理请求，这使测试更加容易。
  // 返回一个 promise 并提供一个有效的响应 （参见 lib/adapters/README.md）。
  adapter: function (config) {
    /* ... */
  },
  // `auth` HTTP Basic 验证
  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 // 默认值
}

response 参数

axios.get('http://httpbin.org/get').then(function (res) {
  console.log(res.data);
});

使用了传统的.then()方法，来处理该Promise对象。这个.then()方法接收一个回调函数，当请求成功时，该回调函数将接收一个res参数，该参数包含了响应数据的全部信息，包括res.status, res.statusText, res.headers等字段。因此，在.then()回调函数内，我们可以通过访问res.data来获取响应主体中的数据

或者ES6的箭头函数和简化的Promise语法。

axios.get('http://httpbin.org/get').then(response => {
  console.log(response.data);
});

使用了ES6的箭头函数和简化的Promise语法，来处理该Promise对象。由于这种写法比较简洁，因此是目前最常用的写法之一。这个箭头函数接收一个response参数，该参数包含了响应数据的全部信息，包括response.status, response.statusText, response.headers等字段。因此，在箭头函数内，我们可以通过访问response.data来获取响应主体中的数据

res的结构

// res的结构

{
  // `data` 是服务器后端返回的信息
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

error 参数

axios.get('http://httpbin.org/get')
  .catch(function (error) {
    if (error.response) {
      // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已经成功发起，但没有收到响应
      // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
      // 而在node.js中是 http.ClientRequest 的实例
      console.log(error.request);
    } else {
      // 发送请求时出了点问题
      console.log('Error', error.message);
    }
    console.log(error.config);
});

或者

axios.get('http://httpbin.org/get')
  .catch(error => {
    if (error.response) {
      // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已经成功发起，但没有收到响应
      // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
      // 而在node.js中是 http.ClientRequest 的实例
      console.log(error.request);
    } else {
      // 发送请求时出了点问题
      console.log(`Error ${error.message}`);
    }
    console.log(error.config);
});

使用 error.toJSON 可以获取更多关于HTTP错误的信息。

Axios对象

编写大型项目时，会使用多个axios，每个都需要配置统一的 base_url、header 等，我们可以利用 axios.create 创建一个公共的 Axios对象：

const my_request = axios.create({
  baseURL: 'http://httpbin.org',
  headers: {
           'X-Custom-Header': 'foobar',  
            Authorization: 'Bearer token123'}
});

当需要使用 Axios 发生请求时：

my_request.get(url: "/get")
.then(res => {
    console.log(res.data);
});

Axios 的默认配置

可以使用 axios.defaults 对象来设置全局的默认配置。以下是一个示例：

import axios from 'axios';

// 设置默认的 base URL
axios.defaults.baseURL = 'http://api.example.com';

// 设置默认的请求头
axios.defaults.headers.common['Authorization'] = 'Bearer token123';
axios.defaults.headers.post['Content-Type'] = 'application/json';

export default {
  methods: {
    axiostest(data) {
      // 发送请求的代码
    }
  }
}

在上述示例中，我们使用 axios.defaults.baseURL 设置了默认的 base URL，这意味着在发送请求时不需要再提供完整的 URL，只需要提供相对路径即可。同时，我们使用 axios.defaults.headers 设置了默认的请求头，这样在每个请求中都会自动带上这些请求头。

你可以根据需求设置其他的默认配置，例如超时时间、拦截器等。设置默认配置后，在发送请求时可以省略一些通用的配置，使代码更简洁而且易于维护。

拦截器

Axios 中的拦截器（Interceptor）是用于在发送请求或响应到达之前，对它们进行拦截和处理的中间件。我们可以通过拦截器来全局地添加请求头、对请求参数进行加密、检查登录状态等操作，或对响应数据进行解析、格式化等处理。

拦截器分为请求拦截器和响应拦截器：

请求拦截器：在发送请求之前对请求进行拦截处理，例如添加请求头、转换请求参数等操作；
响应拦截器：在接收到响应数据之后对响应进行拦截处理，例如解析返回数据、格式化数据等操作。

Axios 允许我们通过以下方式来添加拦截器：

// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

在上述代码中，我们使用axios.interceptors.request.use()方法来添加一个请求拦截器，使用axios.interceptors.response.use()方法来添加一个响应拦截器。

对于请求拦截器，我们可以在该函数内部做一些操作，例如添加全局的请求头，对请求参数进行加密等。需要注意的是，如果想让请求继续执行，必须 return config 对象，否则请求会被阻止。如果想要中止这个请求，可以返回一个 Error 对象或者一个 Promise 对象，后者的 catch 方法会被调用。

对于响应拦截器，我们可以在该函数内部解析和处理服务器返回的数据，例如对返回数据进行格式化、判断登录状态等。同样需要注意的是，如果想让响应继续执行，必须 return response 对象，否则响应会被阻止。如果想要中止这个响应或返回一个错误信息，可以返回一个 Error 对象或者一个 Promise 对象，后者的 catch 方法也会被调用。

需要注意的是，拦截器可以被多次调用，因此可以添加多个请求拦截器和响应拦截器，它们会依次执行并传递数据。其中，请求拦截器的后添加者先执行，响应拦截器的先添加者先执行。

拦截器示例【获取本地的token值，添加到请求数据中并处理响应异常】

import axios from 'axios';

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com',
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 从本地获取token（例如从localStorage或者cookie中获取）
    const token = localStorage.getItem('token');

    // 如果token存在，则将其添加到请求头部或请求参数中
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
      // 或者：config.params['token'] = token;
    }

    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 处理成功的响应
    const code = response.status;
    if ((code >= 200 && code < 300) || code === 304) {
      return Promise.resolve(response.data);
    } else {
      return Promise.reject(response);
    }
  },
  error => {
    // 处理错误的响应
    console.log(error);
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 返回401 清除token信息并跳转到登陆页面
          store.commit('DEL_TOKEN');
          router.replace({
            path: '/login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          });
          break;
        case 404:
          Message.error('网络请求不存在');
          break;
        default:
          Message.error(error.response.data.message);
      }
    } else {
      // 请求超时或者网络有问题
      if (error.message.includes('timeout')) {
        Message.error('请求超时！请检查网络是否正常');
      } else {
        Message.error('请求失败，请检查网络是否已连接');
      }
    }
    return Promise.reject(error);
  }
);

// 发送请求
instance.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

首先创建了一个名为instance的axios实例，并设置了基础URL。然后我们使用interceptors.request方法来定义请求拦截器。在请求拦截器中，我们从本地获取token值，并将其添加到请求头部或请求参数中。
在发送请求之前，我们可以通过调用instance.get、instance.post等方法来发送请求。这些请求会经过请求拦截器，token会被添加到请求数据中。最后，我们可以通过.then处理响应成功的回调函数，或通过.catch处理错误的回调函数。
之后添加了响应拦截器。在响应拦截器中，我们首先处理成功的响应，如果响应状态码在200到299之间或者为304，我们将通过Promise.resolve返回响应数据。否则，我们将通过Promise.reject返回整个响应对象。
对于错误的响应，我们首先检查error.response是否存在，如果存在，则根据不同的状态码执行相应的操作。例如，在状态码为401时，我们清除token信息并重定向到登录页面；在状态码为404时，我们显示一个错误提示。对于其他状态码，我们可以根据实际需要进行相应的处理。
最后，我们仍然可以通过.then和.catch来处理成功和错误的回调函数。

async await的使用

如果你不喜欢通过then和catch这个回调的方式来获取数据，也只可以通过async 和await的方式来处理异步部分。

async function login() {
  try {
    const userInfo = {
      username: 'musen123',
      password: '1234567'
    };
    const response = await axios.post('http://api.keyou.site:8000/user/login/', userInfo);
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

在上面的示例中，我们将异步操作包裹在一个async函数中，在函数内部使用await关键字来等待axios请求的结果。如果请求成功，返回的结果会被赋值给response变量；如果请求失败，会抛出一个错误，我们可以使用try-catch语句来捕捉并处理错误。最后，我们可以使用console.log打印响应结果，使用console.error打印错误信息。

Axios 简单基础应用

Axios 简单基础应用

安装axios

axios简单示例

发送get请求

发送post请求

application/json

application/x-www-form-urlencoded

multipart/form-data

利用FormData对象上传文件

axios的参数解析

示例

request config 参数

response 参数

error 参数

Axios对象

Axios 的默认配置

拦截器

拦截器示例【获取本地的token值，添加到请求数据中并处理响应异常】

async await的使用

评论