赞
踩
安装axios ---> 封装request模块
- 设置基地址 - 单独设置一个函数来发ajax
npm i axios
建立 src/utils/request.js
模块,代码如下
- // 1. 创建一个新的axios实例
- // 2. 请求拦截器,如果有token进行头部携带
- // 3. 响应拦截器:1. 剥离无效数据 2. 处理token失效
- // 4. 导出一个函数,调用当前的axsio实例发请求,返回值promise
-
- import axios from 'axios'
-
- export const baseURL =
- const instance = axios.create({
- // axios 的一些配置,baseURL timeout
- baseURL:'xxxx',
- timeout: 5000
- })
-
- // 请求工具函数
- export default (url, method, submitData) => {
- // 负责发请求:请求地址,请求方式,提交的数据
- return instance({
- url,
- method,
- // 1. 如果是get请求 需要使用params来传递submitData ?a=10&c=10
- // 2. 如果不是get请求 需要使用data来传递submitData 请求体传参
- // [] 设置一个动态的key, 写js表达式,js表达式的执行结果当作KEY
- // method参数:get,Get,GET 转换成小写再来判断
- // 在对象,['params']:submitData ===== params:submitData 这样理解
- [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
- })
- }
-

home.js
- import request from '@/utils/request'
-
- // 标题分类
- export const homeHeadCategory = () => {
- return request('/home/category/head', 'get')
- }
使用
- import { homeHeadCategory } from '@/api/home.js'
- getHeadCategory (context) {
- homeHeadCategory().then((data) => {
- console.log(data)
- context.commit('setHeadCategory', data.result)
- })
- }
get带参(其他http方法同理)
- export const userMobileLoginMsg = (mobile) => {
- return request('/login/code', 'get', { mobile })
- }
await userMobileLoginMsg(form.mobile).then((res) => console.log(res))
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。