URL优化

async…await 用于同步接收网络请求的结果

常规的代码

export async function articleGetAllService () {//发送异步请求，获取所有文章数据//同步等待服务器响应的结果，并返回，async,awaitreturn await axios.get('http://localhost:8080/article/getAll').then(result => {return result.data;}).catch(err => {return err;});
}

封装URL的优化代码

const baseURL = 'http://localhost:8080'
const instance = axios.create({ baseURL })export async function articleGetAllService () {//发送异步请求，获取所有文章数据//同步等待服务器响应的结果，并返回，async,awaitreturn await instance.get('/article/getAll').then(result => {return result.data;}).catch(err => {return err;});
}

函数优化

封装一个拦截器：在请求或响应被 then 或 catch 处理前拦截它们

创建一个util的工具包，在工具包里创建request.js文件，编写如下代码：

//定制请求的实例//导入axios
import axios from 'axios';
//定义一个变量，记录公共的前缀baseURL
const baseURL = 'http://localhost:8080'
const instance = axios.create({ baseURL })//添加响应式拦截器
instance.interceptors.response.use(result => {//http响应码为2xx会触发该函数return result.data;},err => {//http响应码不是2xx会触发该函数alert('服务异常');return Promise.reject(err);//异步的状态转化为失败的状态}
)export default instance;

此时，函数可以优化为如下代码：

import request from '@/util/request.js'//获取所有文章数据的函数
export function articleGetAllService () {//发送异步请求，获取所有文章数据//同步等待服务器响应的结果，并返回，async,awaitreturn request.get('/article/getAll');
}//根据文章分类和发布状态搜索的函数
export function articleSearchService (conditions) {//发送请求，完成搜索return request.get('/article/search', {params: conditions});
}

笔记参考