本项目借鉴项目134355/min-request的网络请求代码。
本项目根据该项目的网络请求二次开发,分离接口,按需引入。在于解决uniapp项目网络请求问题,统一管理请求、拦截和接口。
在本项目最新的更新中更改了原有的参数传入方式,实现了自动添加参数功能。
-
项目中加入utils/
mv utils <your-project>
-
在main.js中引入
import request from "./utils/request"; Vue.use(request);
-
修改服务请求地址
// utils/api.js mRequest.setConfig(config => { config.baseURL = "http://server-url"; return config; });
- 开发时此处可使用环境变量来切换环境
-
创建api文件夹
mkdir api
-
在api/下创建接口文件
以用户登录为例,文件名为
user.js
import request from "../utils/api"; export function login(data) { return request.post({ url: "/user/login", data: data }) }
-
页面中请求
<template> ... </template> <script> import { login } from "../../api/user"; export default { methods: { login({ phone_number: "123123123", "verify_code": "123123" }).then(response => { console.log(response.data); }) } } </script>
-
url添加多个参数,如
token
等import request from "../utils/api"; export function delUser(token, uid, data) { return request.post({ url: "/user/delete", data: data, params: {token, uid} }) }
... deluser( "tokenbalabala", // token 12, //uid { // 这里只是为了演示强行加入data username: "kuari", password: "adminadmin" } ) ...
请求时候url将变为:
http://xxx.com/user
/delete?token=tokenbalabala&uid=12