Vue中axios请求二次封装

原创已于 2022-09-27 09:30:40 修改 · 1.9k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #原力计划 #Axios

于 2022-06-10 16:32:37 首次发布

web前端同时被 3 个专栏收录

79 篇文章

订阅专栏

JavaScript

64 篇文章

订阅专栏

vue

28 篇文章

订阅专栏

本文介绍了axios在网络请求中的应用，包括其在浏览器和node.js环境中的使用，以及如何在Vue项目中进行二次封装。通过设置拦截器和基础URL，实现了请求和响应的自定义处理。同时展示了如何在Vue组件中调用封装后的API进行数据请求。

1.Axios 是什么

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用XMLHttpRequests。

特性

从浏览器创建 XMLHttpRequests
从 node.js
创建 http 请求
支持 Promise API 拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

1.安装axios

$ npm install axios

2.在Vue中二次封装并使用

mian.js引入并挂载到Vue实例中

import axios from 'axios'
Vue.prototype.$axios = axios

2.1二次封装axios请求

在scr目录下新建utils文件夹，并在utils文件夹下新建request.js

import axios from 'axios';
let baseURL = 
 process.env.NODE_ENV == 'production' ? '生产环境' : '开发环境'
 // 创建基础地址
 const service = axios.create({
   baseURL
 })
 service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['apiToken'] = getToken()
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)
 service.interceptors.response.use(
  res => {
    if (response.status === 200) {
      return res.data;
    } else {
      Promise.reject(res.data);
    }
  },
  err => {
    console.log(err);
    return Promise.reject(err);
  }
);
export default service;

2.2创建API请求

在src目录下新建api文件夹，并在此文件夹下新建index.js

// 引入request
import request from '../../utils/request'
// 审批表单
export const getApprovalForm = params => {
  return request({
  	//请求地址，会自动匹配baseurl
    url: '/approve/getApprovalForm',
    // 请求方式
    method: 'GET',
    //请求参数
    params
  })
}

Vue页面使用

// 引入函数
import {getApprovalForm} from '../api/index.js'

// 接口请求方法
async getAppForm(){
let res = await getApprovalForm({id:1})
	if(res.code == 0){
	// code == 0请求成功
	}
}