vue 请求统一封装和调用

104 阅读 0 评论 69 点赞

我是靠谱客的博主坚强外套，这篇文章主要介绍vue 请求统一封装和调用，现在分享给大家，希望可以做个参考。

1. request.js统一封装的请求接口

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*
 * @Author: your name
 * @Date: 2020-03-20 14:17:34
 * @LastEditTime: 2020-03-26 11:27:50
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: 。。。。。。。。。。
 */
import axios from 'axios'
import { Message } from 'element-ui'

const token ='你自己的token'
// create an axios instance
const service = axios.create({
  baseURL: '/api',
  timeout: 80000 // request timeout
})

// request interceptor
service.interceptors.request.use(

  config => {
    // Do something before request is sent
    if (token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
      config.headers.Authorization = token 
      
    }
    return config
  },
  error => {
    // Do something with request error
    // console.log("出错啦",error) // for debug
    Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => response,

  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

2.调用api

复制代码

1
2
3
4
5
6
7
8
9
import request from '@/utils/request'
// 获取你要的数据
export function getData(data) {
	return request({
		url: '/test/testdata/',//自己的接口地址
		method: 'post',//请求方法
        data //需要携带的参数
	})
}

3.调用过程为页面引入api文件，再由api调用统一的请求函数请求数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
import { getData} from "@/api";
 // 获取数据
    getDataTest(data) {
      getData(data)
        .then(response => {
          console.log(response.data;)
        })
        .catch(error => {
          this.$message.error("获取失败！");
        });
    },

这些的前提是配置了代理转发，如果没有配置代理转发直接请求的话请在1中配置，具体方法参阅axios官网

axios中文网|axios API 中文文档 | axios