Vue axios使用示例

Vue axios使用示例

• 参考vue2笔记：Vuejs 网络模块封装_NGC_2070的博客-CSDN博客

axios基本用法

• 使用需要导入

import axios from 'axios'

模拟get请求

axios.get('http://123.207.32.32:8000/home/multidata').then((res) => {
  console.log(res.data)
})

get请求,并且传入参数

axios
  .get('http://httpbin.org/get', {
    params: {
      name: 'coderwhy',
      age: 18
    }
  })
  .then((res) => {
    console.log(res.data)
  })

post请求

axios
  .post('http://httpbin.org/post', {
    data: {
      name: 'why',
      age: 18
    }
  })
  .then((res) => {
    console.log(res.data)
  })

• 补充：Promise本身是可以有类型

new Promise<string>((resolve) => {
  resolve('abc')
}).then((res) => {
  console.log(res.length)
})

axios的配置选项

全局的配置

axios.defaults.baseURL = 'http://httpbin.org'
axios.defaults.timeout = 10000
// axios.defaults.headers = {}

axios
  .get('/get', {
    params: {
      name: 'coderwhy',
      age: 18
    },
    timeout: 5000,
    headers: {}
  })
  .then((res) => {
    console.log(res.data)
  })

// 3.post请求
axios
  .post('/post', {
    data: {
      name: 'why',
      age: 18
    }
  })
  .then((res) => {
    console.log(res.data)
  })

不同开发环境 URL配置

• config.js

// 1.方式一: 手动的切换不同的环境(不推荐)
// const BASE_URL = 'http://coderwhy.org/dev'
// const BASE_NAME = 'coderwhy'

// const BASE_URL = 'http://coderwhy.org/prod'
// const BASE_NAME = 'kobe'

// const BASE_URL = 'http://coderwhy.org/test'
// const BASE_NAME = 'james'

// 2.根据process.env.NODE_ENV区分
// 开发环境: development
// 生成环境: production
// 测试环境: test

let BASE_URL = ''
const TIME_OUT = 10000

if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://123.207.32.32:8000/'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://coderwhy.org/prod'
} else {
  BASE_URL = 'http://coderwhy.org/test'
}

export { BASE_URL, TIME_OUT }

使用Vue配置文件

• 参考：模式和环境变量 | Vue CLI
• ​​​​​​​.env.development

VUE_APP_BASE_URL=https://coderwhy.org/dev

• .env.production

VUE_APP_BASE_URL=https://coderwhy.org/prod

• .env.test

VUE_APP_BASE_URL=https://coderwhy.org/test

axios.all  多个请求, 一起返回

axios
  .all([
    axios.get('/get', { params: { name: 'why', age: 18 } }),
    axios.post('/post', { data: { name: 'why', age: 18 } })
  ])
  .then((res) => {
    console.log(res[0].data)
    console.log(res[1].data)
  })

axios的拦截器

// fn1: 请求发送成功会执行的函数
// fn2: 请求发送失败会执行的函数
axios.interceptors.request.use(
  (config) => {
    // 想做的一些操作
    // 1.给请求添加token
    // 2.isLoading动画
    console.log('请求成功的拦截')
    return config
  },
  (err) => {
    console.log('请求发送错误')
    return err
  }
)

axios ts 封装示例

• 参考 《Vue3项目搭建学习笔记》