vue3请求的封装

860 阅读1分钟

第一步:在项目src文件夹建下建一个request文件夹,放index.js配置文件

import axios from 'axios' // 引用axios

const apiUrl = 'http://www.***.com/api/'

// axios 配置
axios.defaults.timeout = 120000 // 设置接口响应时间

// 增加token(先写了个固定的token,实际项目中应该是通过接口获取到token)
axios.defaults.headers.common['access_token'] = '8b788af301bd40c6b9cc00f0eb11c8e8';

//post请求添加的请求头
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

如果是只有这一个请求要导出export default

// 封装post请求
export function requestPost(url, params) {
    return new Promise((resolve, reject) => {
        return new Promise((resolve, reject) => {
        axios
        .post(apiUrl + url, params)
        .then(res => {
            resolve(res)
        })
        .catch(err => {
            reject(err)
        })
    })
}
//封装get请求
export function requestGet(url, params) {
    return new Promise((resolve, reject) => {
        axios
            .get(apiUrl + url, {
                params: params
            })
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err)
            })
    })
}

第二步:在项目中直接引用,不需要在main.js里配置

   import {requestPost,requestGet} from "../../request"
   
   mounted(){
    requestPost('Common/GetKjOrderFromType',{
    }).then(res=>{
        console.log(res)
    })
    requestGet('CustInfos/Get_cust_vip_id',{}).then(res=>{
        console.log(res)
    })
}