Vue 中使用 Axios

一、准备工作

• 新建 vue-vite 项目

npm init vite@latest vue_axios -- --template vue
cd vue_axios
npm install

• 安装 axios

npm install axios -S # 安装至当前vite项目中

二、vue 中axios 接口的封装方式1

通常在src目录中创建一个utils文件夹用于存放封装好的axios。使代码更为简洁，便于代码的阅读和维护，特别是在不同环境中的域名更改时。

import axios from 'axios'

// 使 request 成为一个新的axios，
// 并且能够使http:127.0.0.1:8000/api/v1/books接口简化
// 在后续需要请求这个接口时，只需要写一个books/即可
const instance = axios.create({
    baseURL: 'http:127.0.0.1:8000/api/v1/', // 基础请求地址
    timeout: 10000, // 超时时间
    headers: { 'X-Custom-Header': 'foobar' } // 携带的请求头
})


// 封装请求

// get请求，访问数据，params查询字符串 200，若使用baseURL需要做出以下变化
// 之后我们便可以只写baseURL之外的即可
// export function get(url, params) {
//     return axios.get(url, {
//         params
//     })
// }
// 完整url = baseURL + url
export function get(url, params) {
    return instance.get(url, {
        params
    })
}
// post请求，提交表单或者新增一个数据 201
export function post(url, data) {
    return instance.post(url, data)
}
// del 删除数据 204
export function del(url) {
    return instance.delete(url)
}
// put 更新数据 200 
export function put(url, data) {
    return instance.put(url, data)
}

• 在 vue 中使用

// 导入 get,通常写于
onclick_btn(){
get(url,{a=1})
.then(res=>console.log(res))
.catch(err=>console.log(err))
}

• 请求拦截

// ********************** 添加拦截器 **********************
// 添加请求拦截器，所有的网络请求会走这个方法
axios.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    console.group("全球请求拦截")
    console.log(config)
    config.headers.token = "5ewgujwketliwnjd4wef4we5tf5wsf"
        // 这里的token是需要根据后端的要求来进行更改的 比如 django 需要 Authorzation
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器，返回数据之后都会先执行此方法
axios.interceptors.response.use(function(response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function(error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

• 错误处理

二、vue 中axios 接口的封装方式2（多接口管理）

• 最终封装成果

• src目录下新建一个utils文件夹，封装一个request文件用于管理请求的一些BaseURL、请求拦截、响应拦截等。

import axios from 'axios'

// 使 request 成为一个新的axios，
// 并且能够使http:127.0.0.1:8000/api/v1/books接口简化
// 在后续需要请求这个接口时，只需要写一个books/即可
const request = axios.create({
    baseURL: 'http:127.0.0.1:8000/api/v1/', // 基础请求地址
    timeout: 10000, // 超时时间
    headers: { 'X-Custom-Header': 'foobar' } // 携带的请求头，如 Token 等 
})
export default request

• src目录下新建一个api文件夹，通过分别定义好关于book和author两个或其它单独的功能为一个文件，里面封装的是各个功能所需要的RESTful接口，并在index中统一导出这些功能的接口。

// book.js
import request from '../utils/request'

// 请求所有书
export function getBooks(params) {
    return request({
        method: 'GET',
        url: 'books/',
        params,
    })
}

// 查看书详情
export function getBook(id) {
    return request({
        method: 'GET',
        url: 'books/${id}',
    })
}
// 修改书内容，更新
export function putBook(id, data) {
    return request({
        method: 'PUT',
        url: 'books/${id}',
        data,
    })
}
// 新增一本书
export function postBook(data) {
    return request({
        method: 'POST',
        url: 'books/',
        data,
    })
}

// 删除指定书
export function delBook(id) {
    return request({
        method: 'DELETE',
        url: 'books/${id}',
    })
}

// author.js
import request from '../utils/request'

// 请求所有作者
export function getAuthors(params) {
    return request({
        method: 'GET',
        url: 'authors/',
        params,
    })
}

// 查看作者详情
export function getAuthor(id) {
    return request({
        method: 'GET',
        url: 'authors/${id}',
    })
}
// 修改作者内容，更新
export function putAuthor(id, data) {
    return request({
        method: 'PUT',
        url: 'authors/${id}',
        data,
    })
}
// 新增一个作者
export function postAuthor(data) {
    return request({
        method: 'POST',
        url: 'authors/',
        data,
    })
}

// 删除指定作者
export function delAuthor(id) {
    return request({
        method: 'DELETE',
        url: 'authors/${id}',
    })
}

• main.js中向vue中添加api

import { createApp, Vue } from 'vue'
import App from './App.vue'
import api from './api'

const app = createApp(App)
app.use(store)
app.use(router)
app.config.globalProperties.$api = api // 自定义全局添加
app.mount('#app')

• vue组件中接口的使用

btnGetBooks(){
this.$api.getBooks(params).then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });