vue3一下的axios封装(接口请求封装)

1.安装axios依赖
npm i axios -S
2.创建一个utils文件,和一个api文件,在前者下面创建一个request.js的文件。该文件中引入axios
import axios from “axios”;
3.开始操作:

 /**
 * 封装axios
 */

import axios from 'axios' //引入axios的第三方插件
import {
  Message
} from 'element-ui' //按需引入ui插件
import {
  config
} from 'vue/types/umd'
//  1.创建axios实列
const service = axios.create({
  // A.公共接口
  baseURL: process.env.BASE_API,
  // B.设置接口请求超时
  timeout: 6 * 1000
})
console.log("11", service);

// 2.用创建的axios实例生成请求拦截器
service.interceptors.request.use(config => {
  // 在发送请求之前带上一些东西,config是请求的配置对象,如果直接返回就等于什么都不带
  let token = window.localStorage.token;
  if (token) {
    config.headers.Authorization = 'Bearer' + token; //如果token 存在,就带上token

  } else {
    config.headers['token'] = ''; //return
  }
  return config;
}, error => {
  return Promise.reject(error); //请求错误处理
});

// 3.用创建的axios实例生成响应拦截器
service.interceptors.response.use(response => {
  let {
    code,
    msg
  } = response.data;
  if (code == 0) {
    Message({
      type: success,
      message: msg
    })
  } else {
    Message.error(msg)
  }

  return response;
}, error => {
  Message.error('网络请求发生错误,请稍后再试')
  return Promise.reject(error)
})

// 导出两个请求方法
export default {
  get(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, {
          params
        })
        .then(res => {
          resolve(res.data)
        })

        .catch(err => {
          reject(err)
        })
    })
  },
  post(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, qs.stringify(params))
        .then(res => {
          resolve(res.data)
        })

        .catch(err => {
          reject(err)
        })
    })
  }
}

4.在api下面创建一个js文件(eg:account.js),在该文件中引入request.js文件,开始封装接口函数
/**

  • 引入封装好的接口方法
    */

import $http from ‘…/utils/request’

export const getAccountList = paras => h t t p . p o s t ( ′ u r l ′ , p a r a m s ) / / 如 果 把 r e q u e s t 放 在 全 局 上 , 那 么 在 v u e 组 件 中 就 不 用 引 入 , 直 接 在 函 数 中 用 t h i s . http.post('url', params) //如果把request放在全局上,那么在vue组件中就不用引入,直接在函数中用this. http.post(url,params)//requestvue,this.http.post/get(url.params)发送请求
// eg:// 引入请求函数
// import {getAccountList, delAccount,batchdel,editAccount} from “@/api/account”;//引入请求接口函数

// async getAccounts() {
// // 请求账号列表
// let { total, data } = await getAccountList({
// currentPage: this.currentPage,
// pageSize: this.pageSize
// });

  1. List item
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值