本文共 1297 字，大约阅读时间需要 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/