本文共 1255 字，大约阅读时间需要 4 分钟。

Axios框架的基本使用

1. Axios框架的安装与使用

首先需要安装axios包，并在项目中导入使用。安装命令为：

npm install axios

然后，在你的项目中导入：

import axios from 'axios'

接着，在Vue应用中配置生产提醒为false：

Vue.config.productionTip = false

创建Vue实例并挂载到 DOM 中：

new Vue({  store,  render: h => h(App)}).$mount('#app')

2. Axios发送并发请求

通过 axios.all() 方法可以同时发送多个请求：

axios.all([  axios({    url: 'http://123.207.32.32:8000/home/multidata'  }),  axios({    url: 'http://123.207.32.32:8000/home/data',    params: {      type: 'sell',      page: 5    }  })])  .then((res) => {    console.log(res);    console.log(res[0]);    console.log(res[1]);  })

3. Axios的配置信息

在项目中可以对axios的默认配置进行设置，例如设置全局的baseURL：

axios.defaults.baseURL = 'http://123.207.32.32:8000'

4. Axios拦截器的使用

可以通过拦截器来对请求或响应进行处理。例如，创建一个带有拦截器的axios实例：

const instance = axios.create({  baseURL: 'http://123.207.32.32:8000',  timeout: 5000})instance.interceptors.request.use((config) => {  // 配置请求拦截  return config})instance.interceptors.response.use((res) => {  // 配置响应拦截  return res})instance(config)  .then((res) => {    // 处理成功回调  })  .catch((err) => {    // 处理错误回调  })

5. 其他常用操作

可以通过解构赋值的方式快速获取对象的某些属性：

const obj = {  name: 'kobe',  age: 12}const { name, age } = obj

对于数组进行解构赋值：

const names = ['qqq', 'www', 'eee']const [name1, name2, name3] = names

通过上述方法，可以方便地处理数据和请求。

转载地址：http://zfox.baihongyu.com/