一、axios安装
1、官网寻找安装信息
起步 | Axios中文文档 | Axios中文网
https://www.axios-http.cn/docs/intro
这里使用npm进行安装
npm install axios
2、安装成功提示
3、查询package.json
检查package.json中是否存在axios的信息
二、建立request请求
1、建立request.js文件
首先建立一个专门存放工具的文件夹utils
然后在工具文件夹中建立js文件request.js
2、引入axios方法
import axios from 'axios'
3、创建一个实例
①找到官网给出的示例
②写入request.js中
//axios方法引入
import axios from 'axios'
//创建实例
const request = axios.create({baseURL: 'https://some-domain.com/api/',//暂时先写成这样，后续再修改timeout: 6000,//6秒超时响应headers: {'Content-Type': 'application/json', // 设置默认请求头},
});4、封装POST、GET方法
①参考案例
可根据官方给出的案例进行编写
如上图是单个请求，请求的是服务器地址https://some-demain.com/api/user ,传递的参数是id其值为12345。但这里需要做一个封装更便于前面界面引用
②封装GET、POST请求
utils/request.js
// 引入axios方法
import axios from 'axios'
// 创建axios实例
const request = axios.create({baseURL: 'https://some-domain.com/api/',//暂时先写成这样，后续再修改timeout: 6000,//6秒超时响应headers: {'Content-Type': 'application/json', // 设置默认请求头},
});
// 封装GET请求
export const get = (url, params = {}) => {return request.get(url, { params });
};
// 封装POST请求
export const post = (url, data = {}) => {return request.post(url, data);
};
// 导出request实例
export default request;③引用示例
<script setup>
import { get, post } from '@/utils/request';// 使用GET请求
get('/users', { page: 1, limit: 10 }).then(response => {console.log(response.data);}).catch(error => {console.error(error);});// 使用POST请求
post('/users', { name: 'John', age: 30 }).then(response => {console.log(response.data);}).catch(error => {console.error(error);});
</script><template>
</template><style scoped></style>
三、使用apifox建立接口
1、apifox的下载
官网地址
Apifox - API 文档、调试、Mock、测试一体化协作平台。拥有接口文档管理、接口调试、Mock、自动化测试等功能，接口开发、测试、联调效率，提升 10 倍。最好用的接口文档管理工具，接口自动化测试工具。https://apifox.com/
2、建立apifox项目
个人团队->新建项目
输入项目的名称->“新建”
3、设置默认返回值
因为会用到很多相似的返回属性，所以这里先设置一个统一的返回模板
默认响应模板->通过JSON等生成(或直接加入)
通过json生成
输入必要的返回代码code,返回信息msg，返回数据data。输入信息之后点击确定
保存之后，点击mock输入默认值，code的默认值一般都是1(成功是1，错误是返回错误代码)；msg的默认值是“成功”(正确输出就是成功)，data默认值是空对象
3、建立项目接口
新建接口入口
输入路径和接口名称
输入信息之后点击保存即可
4、云端Mock设置
为了访问的方便，这里直接选用云端Mock，离线也可访问
①开启云端Mock
右上角->选择环境->云端Mock->去开启
开启云端Mock
回到接口页面，重新选择云端Mock
②将获取的url部署回项目
复制云端Mock的地址
粘贴到request.js中的的地址
注：删除当前新建接口的这个方法/testget
③新建期望
进入页面，输入期望名称，点击自动生成即可生成默认返回值
四、项目中测试建立的接口
在App.vue中进行测试
1、引入方法
import { post,get } from '@/utils/request'
2、引用get、post方法
// 使用GET请求
get('/testget', {}).then(response => {console.log(response.data);}).catch(error => {console.error(error);});// 使用POST请求
post('/testpost', {}).then(response => {console.log(response.data);}).catch(error => {console.error(error);});3、检查是否返回成功
