当前位置:   article > 正文

vue 封装axios 并省略写 data、params参数_axios 网络请求传参数 可以不用data接么

axios 网络请求传参数 可以不用data接么

安装axios ---> 封装request模块

- 设置基地址
- 单独设置一个函数来发ajax

安装 axios

npm i axios

新建request模块

建立 src/utils/request.js 模块,代码如下

  1. // 1. 创建一个新的axios实例
  2. // 2. 请求拦截器,如果有token进行头部携带
  3. // 3. 响应拦截器:1. 剥离无效数据 2. 处理token失效
  4. // 4. 导出一个函数,调用当前的axsio实例发请求,返回值promise
  5. import axios from 'axios'
  6. export const baseURL =
  7. const instance = axios.create({
  8.  // axios 的一些配置,baseURL timeout
  9.  baseURL:'xxxx',
  10.  timeout: 5000
  11. })
  12. // 请求工具函数
  13. export default (url, method, submitData) => {
  14.  // 负责发请求:请求地址,请求方式,提交的数据
  15.  return instance({
  16.    url,
  17.    method,
  18.    // 1. 如果是get请求 需要使用params来传递submitData   ?a=10&c=10
  19.    // 2. 如果不是get请求 需要使用data来传递submitData   请求体传参
  20.    // [] 设置一个动态的key, 写js表达式,js表达式的执行结果当作KEY
  21.    // method参数:get,Get,GET 转换成小写再来判断
  22.    // 在对象,['params']:submitData ===== params:submitData 这样理解
  23.   [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  24. })
  25. }

测试

home.js

  1. import request from '@/utils/request'
  2. // 标题分类
  3. export const homeHeadCategory = () => {
  4. return request('/home/category/head', 'get')
  5. }

使用

  1. import { homeHeadCategory } from '@/api/home.js'
  2. getHeadCategory (context) {
  3. homeHeadCategory().then((data) => {
  4. console.log(data)
  5. context.commit('setHeadCategory', data.result)
  6. })
  7. }

get带参(其他http方法同理)

  1. export const userMobileLoginMsg = (mobile) => {
  2. return request('/login/code', 'get', { mobile })
  3. }
  await userMobileLoginMsg(form.mobile).then((res) => console.log(res))

本文内容由网友自发贡献,转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/924608?site
推荐阅读
相关标签
  

闽ICP备14008679号