vue3中封装axios

方式1

安裝axios

npm install axios --save

src/api/index.js

 import axios from 'axios'
//创建axios的一个实例 
var instance = axios.create({
    baseURL:'http://localhost:8080/',//接口统一域名
    timeout: 6000                                                       //设置超时
})


//------------------- 一、请求拦截器 忽略
instance.interceptors.request.use(function (config) {
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

//----------------- 二、响应拦截器 忽略
instance.interceptors.response.use(function (response) {
    return response.data;
}, function (error) {
    // 对响应错误做点什么
    console.log('拦截器报错');
    return Promise.reject(error);
});

/**
 * 使用es6的export default导出了一个函数，导出的函数代替axios去帮我们请求数据，
 * 函数的参数及返回值如下：
 * @param {String} method  请求的方法：get、post、delete、put
 * @param {String} url     请求的url:
 * @param {Object} data    请求的参数
 * @returns {Promise}     返回一个promise对象，其实就相当于axios请求数据的返回值
 */
export default function (method, url, data = null) {
    method = method
    if (method == 'post') {
        return instance.post(url, data)
    } else if (method == 'get') {
        return instance.get(url, { params: data })
    } else if (method == 'delete') {
        return instance.delete(url, { params: data })
    }else if(method == 'put'){
        return instance.put(url, data)
    }else{
        console.error('未知的method'+method)
        return false
    }
}

src/api/api.js

import req from './index.js'                //连接接口文件
export const request1 = function(e){
    //post方法以及传参    qwe是字段   e是参数
       return req('post','/article/type', { qwe: e })    
}
export const request2 = function(e){
    //get方法以及传参 qwe是字段   e是参数
    return req('get','/article/type?qwe=' + e)  
 }

在需要的组件使用

import { request1, request2 } from '../api/api' 
   //函数名1     函数名2         接口文件

调用该方法

request1(123)     //函数名以及传参
    .then(res => {
          console.log(res)    //成功后返回的数据
    })
request2(123)     //函数名以及传参
    .then(res => {
          console.log(res)    //成功后返回的数据
    })

方式2

//
import axios from 'axios'

const http = axios.create({
       baseURL: 'http://localhost:3204/admin/api'
})

// 给前端请求接口加一个属性,通过判断此接口是否可以请求
// http.interceptors.request.use(function (config) {
//   if (sessionStorage.login_token) {
//     config.headers.Authorization = 'Bearer ' + sessionStorage.login_token
//   }
//   return config
// }, function (error) {
//   return Promise.reject(error)
// })

// 错误拦截
// http.interceptors.response.use(res => {
//   return res
// }, err => {
//   if (err.response.data.message) {
//     Vue.prototype.$message({
//       type: 'error',
//       message: err.response.data.message
//     })
//     // 请求报错都会通过这个错误拦截来处理
//     if (err.response.status === 401) {
//       router.push('/login')
//     }
//   }
//   return Promise.reject(err)
// })

export {
      http
}

在需要的组件引入

import { http } from '../http.js'

使用

const getMusicInfo = async () => {
  // musicInfo = await $http.get('https://api.com/api/rand.music')
  const musicInfo = await http.get('/articles/type')
}