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

  • 6
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值