当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue 统一封装http请求

vue 统一封装http请求

2020年07月23日  | 移动技术网IT编程  | 我要评论 
// http.js统一封装接口
/*
 * @Author
 * @Date
 */
import axios from 'axios'
const token ='你的token'
// create an axios instance
const http = 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)
    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接口
// 比如在首页，则命名homeHttp.js
// 在homtHttp.js中写上首页中所有要调用的api
import http from '@/utils/http'
// 获取你要的数据
export default {
	getLoginStatus(params) {
		return http({
			url: '/test/testdata/',//自己的接口地址
			method: 'post', //请求方法
			type: 'json'
	}, params) //需要携带的参数
}

// 具体组件中调用api
import homtHttp from "@/api";
 // 获取数据
    getDataTest(data) {
      homtHttp.getLoginStatus(params)
        .then(response => {
          console.log(response.data;)
        })
        .catch(error => {
          this.$message.error("获取失败！");
        });
    },

请先配置了代理转发，具体请移步axios官网
http://www.axios-js.com/zh-cn/docs/

本文地址：https://blog.csdn.net/qyl_0316/article/details/107514711

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网