vue3跨域请求及一些常用配置

在使用vue3开发的时候，总免不了做一些基础的配置。比如跨域配置，一些常用函数的封装等等。接下来，我就做一些自己在在开发中所运用到一些常用配置。
一、跨域配置
其实，对于跨域配置，我之前的博文中也有说过，在这儿我也就大概再讲一次。毕竟vue3跟vue2还是有那么一点点的小差别。
1、在根目录下的 vite.config.js 文件中配置，网上有说这个文件不能配置，经测试，也没啥毛病。
在这里插入图片描述

proxy: {
	'/test': { //这里的test可以理解为后端接口里面的前缀，就是所有的地址前面都是http://aaa.com/test/xxx/xxx
		target: 'http://www.laravel2.bnc:83/index.php',//这个不多说，请求的目标地址
		changeOrigin: true,//是否允许跨域
		//rewrite: path => path.replace(/^\/api/, '')
		pathRewrite: {
			'^/test': '/' // 重写路径（表示请求的地址没有test前缀的时候）
		}
	}
}

2、在src目录下新建一个utils目录（其实文件夹的名字可以随意，但为了规范【网上也是多是这样子的名字】），之后在该目录下新建一个 request.ts 文件（js的文件也可以。如果是js ,那就按js的语法来写）

import axios from "axios";


const service = axios.create({
    timeout:5000,
    baseURL:'http://127.0.0.1:5173/test',//最后面的test就是刚才上面配置文件中请求地址的前缀）
    //而 http://127.0.0.1:5173就是当前运行vue的地址
    //我只是为了方便，其实，是应该在根目录有一个env文件里面配置的
    headers:{//请求头，可以加上toekn等内容
        'Content-Type': 'application/json;charset=utf-8'
    },
    validateStatus(status){ //后端返回的状态码，是可选的参数，也可以不加
        return status == 200 ? true : false;
    }
})


service.interceptors.request.use((config:any)=>{
    return config;
} , (error)=>{
    //console.log(error)
    Promise.reject(error)
})

//响应的内容
//根据自己的业务情况，同时也看后端的同事返回的数据结构来配置
service.interceptors.response.use((response:any)=>{
    //响应成功
    const res = response.data;
    return Promise.resolve(res)
} , (error:any)=>{
    //响应失败
    let msg = {
        message:'no data',
        data:'none'
    }
    return Promise.reject(msg)
})

export default service;

3、上面两步都完成后，我们就可以正常来请求我们的接口了。当然，为了以后更方便的维护自己的代码，业内也一般会有一个规范（当然，也不是一定得这样）。我们把相同的模块放一个文件里面来写。假如，用户模块。我们就这样，在src目录下下新建一个api目录，再在api目录下新建一个user.ts的文件
在这里插入图片描述

//请注意下面代码里面的请求方式，get,post ,put ....
//为了代码规范，我们尽可能的使用resful来写。当然，这也是需要后端的同事配合才行
//获取数据 get
//添加数据和文件上传  post
//修改 put
//删除 delete
//除get请求的参数是键是 params 以外，其他都是以data为键名
import service from '../utils/request' //注意引入的路径
export const getUser = (url:string , params)=>{
    return service({
        url:url,
        method:'get',
        params:params,
    })
}
export const insertUser = (url:string , data:object)=>{
    return service({
        url:url,
        method:'post',
        data:data
    })
}

export const updateUser = (url:string , params:object)=>{
    return service({
        url:url,
        method:'put',
        data:params
    })
}

export const deleteUser = (url:string , data?:object)=>{
    return service({
        url:url,
        method:'delete',
        data:data
    })
}


//如果还其他模块，那就再新建一个文件，比如说 goods.ts 、member.ts 等等

4、在实际使用的时候，我们可以这样子去调用

import { getUser, insertUser, updateUser , deleteUser} from '../api/user'
function getUsers(id){
    let params = {id:id}
    getUser('user/getOne' , params)
    .then(res=>{
        console.log(res)
    })
}

function addUser(){
    let obj = {
        name:'xiaobing',
        age:15,
        sex:'boy',
        pwd:'123456'
    }
    insertUser('user/add' , obj)
    .then(res=>{
        console.log(res)
    })
}

function editUser(id){
    let obj = {
        name:'xiaobing',
        age:16,
        pwd:'456789'
    }
    //user/edit/${id} 而我们请求的是方式是pathinfo【user/edit/5】 ,并不是 参数【user/edit?id=5】这样的形式
    updateUser(`user/edit/${id}` , obj)
    .then(res=>{
        console.log(res)
    })
}

function delUser(id){
    let obj = {}
    //obj 是可选参数
    deleteUser(`user/del/${id}`)
    .then(res=>{
        console.log(res)
    })
}

二、try … catch 的使用方法
根据菜鸟教程里面的讲解，try…catch是执行和捕获异常。其实，如果结使es6里面的promise来使用的话，有的时候也是一个很有意思的事儿。

async function test(age){
    return new Promise((resolve,reject)=>{
        if(age >= 18){
            resolve(true)
        }else{
            reject(false)
        }
    })
}


async function env(){
    try{
        let bol = await test(5); 
        console.log(bol)
    }catch(e){
    	//其实，我们在执行test(age)函数的时候，因为参数age 是 小于18 ，所以，代码直接就进了异常，
    	//而参数e 就是上面 test(age)代码里面走 reject() 的那一块。
    	//当然，如果没有捕获取异常，那代码走的就是上面try的那一块
        console.error(e)
    }
}
env();