vue项目封装axios并访问接口
Posted xlfdqf
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目封装axios并访问接口相关的知识,希望对你有一定的参考价值。
1.在src下新建util文件夹,在util下新建request.js文件:
封装axios:
import axios from ‘axios‘ import QS from ‘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; return config; , error => return Promise.error(error); ); // 响应拦截器 axios.interceptors.response.use( response => if (response.status === 200) return Promise.resolve(response); else return Promise.reject(response); , // 服务器状态码不是200的情况 error => if (error.response.status) console.log(error) return Promise.reject(error.response); ); export function get(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‘); ) ); export default axios
2:在util文件下再新建api.js文件:
import get, post from ‘./request‘ export function getTest(params) return post(`/api/tbk/dg_optimus_material`, params); export function getNvZhuang(params) return post(`/api/tbk/dg_material_optional `, params);
3:在html页面访问接口:
import getTest, getNvZhuang from "@/util/api.js"; // 导入api接口 mounted: function() this.queryList(); , methods: //精选 queryList() let params = pageNo: 1, pageSize: 20 ; getTest(params) .then(res => this.jingxuanlist = res.tbk_dg_optimus_material_response.result_list.map_data; console.log(this.jingxuanlist); ) .catch(error => console.log(error); );
以上是关于vue项目封装axios并访问接口的主要内容,如果未能解决你的问题,请参考以下文章
vue axios接口封装Promise封装简单的axios方法封装vue接口方法封装vue postgetpatchput方法封装