vue 请求统一封装和调用

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

/*
 * @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

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

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

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

最后

以上就是坚强外套为你收集整理的vue 请求统一封装和调用的全部内容，希望文章能够帮你解决vue 请求统一封装和调用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。