vue打包后axios返回html,vue项目封装axios并访问接口

import axios from 'axios'import QSfrom 'qs';//import store from '@/store/index.js';

import { Message } from 'element-ui'; //element库的消息提示,可以不用//环境的切换//if (process.env.NODE_ENV == 'development') {//开发//axios.defaults.baseURL = '/api';}//else if (process.env.NODE_ENV == 'debug') {//测试//axios.defaults.baseURL = 'https://www.ceshi.com';//}//else if (process.env.NODE_ENV == 'production') {//线上//axios.defaults.baseURL = 'https://www.production.com';//}//请求超时时间

axios.defaults.timeout = 15000;//post请求头

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';//请求拦截器

axios.interceptors.request.use(

config=>{//每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了

const token = '45f8f587-7b46-462f-a8c4-1ca4dc64a336';if (token) { //判断是否存在token,如果存在的话,则每个http header都加上token

config.headers.Token =token;

}returnconfig;

},

error=>{returnPromise.error(error);

});//响应拦截器

axios.interceptors.response.use(

response=>{if (response.status === 200) {returnPromise.resolve(response);

}else{returnPromise.reject(response);

}

},//服务器状态码不是200的情况

error =>{if(error.response.status) {

console.log(error)

}returnPromise.reject(error.response);

}

);

export functionget(url, params) {return new Promise((resolve, reject) =>{

axios.get(url,

{params: params})

.then(res=>{

resolve(res.data);

})

.catch(err =>{if (!err.response) {

Message({

showClose:true,

message:'get请求错误',

type:'error'});

}else{

reject(err.data);

console.log(err.response,'异常2');

}

})

});

}

export function post(url,params) {return new Promise((resolve, reject) =>{

axios.post(url,params)

.then(res=>{

resolve(res.data);

})

.catch(err =>{if (!err.response) {

Message({

showClose:true,

message:'post请求错误',

type:'error'});

}else{

reject(err.data);

console.log(err.response,'异常2');

}

})

});

}

exportdefault axios

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目中,我们通常会使用axios来进行接口请求。为了方便使用和维护,我们可以将axios进行封装,使其可以全局使用。下面是一个简单的封装axios的方法: 1. 在src目录下新建一个api文件夹,用于存放所有的接口请求相关文件。 2. 在api文件夹下新建一个api.js文件,用于封装axios。 3. 在api.js文件中引入axios,并设置axios的一些默认配置,例如设置请求超时时间、设置请求头等。 4. 在api.js文件中定义一个apiFun函数,用于发送请求。这个函数可以接收三个参数:请求地址、请求参数和请求方法(get、post等)。 5. 在api.js文件中使用axios发送请求,并返回一个Promise对象,以便在调用apiFun函数时可以使用async/await语法。 6. 在main.js文件中全局引入api.js,并将apiFun函数挂载到Vue原型上,以便在组件中可以直接使用this.$apiFun来发送请求。 下面是一个简单的示例代码: ``` // api.js import axios from 'axios' axios.defaults.timeout = 5000 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' const apiFun = (url, params = {}, method = 'get') => { return new Promise((resolve, reject) => { axios({ method: method, url: url, data: method === 'post' ? params : null, params: method === 'get' ? params : null }).then(res => { resolve(res.data) }).catch(err => { reject(err) }) }) } export default apiFun ``` ``` // main.js import Vue from 'vue' import apiFun from '@/api/api.js' Vue.prototype.$apiFun = apiFun ``` 使用示例: ``` // 在组件中使用 async getData () { try { const res = await this.$apiFun('/api/getData', { id: 1 }, 'get') console.log(res) } catch (err) { console.log(err) } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值