最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

vue中axios的封装问题(简易版拦截,get,post)

来源:动视网 责编:小采 时间:2020-11-27 22:12:50
文档

vue中axios的封装问题(简易版拦截,get,post)

vue中axios的封装问题(简易版拦截,get,post):第一步还是先下载axios npm install axios --save 第二步/src/utils/目录下建立一个htttp.js import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request
推荐度:
导读vue中axios的封装问题(简易版拦截,get,post):第一步还是先下载axios npm install axios --save 第二步/src/utils/目录下建立一个htttp.js import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request


第一步还是先下载axios

npm install axios --save

第二步/src/utils/目录下建立一个htttp.js

import axios from 'axios';
axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';
//http request 
axios.interceptors.request.use(
 config => {
 // const token = getCookie('名称');
 config.data = JSON.stringify(config.data);
 config.headers = {
 'Content-Type':'application/x-www-form-urlencoded'
 }
 // if(token){
 // config.params = {'token':token}
 // }
 return config;
 },
 error => {
 return Promise.reject(err);
 }
);
//http response 
axios.interceptors.response.use(
 response => {
 if(response.data.errCode ==2){
 router.push({
 path:"/login",
 querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
 })
 }
 return response;
 },
 error => {
 return Promise.reject(error)
 }
)
/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function fetch(url,params={}){
 return new Promise((resolve,reject) => {
 axios.get(url,{
 params:params
 })
 .then(response => {
 resolve(response.data);
 })
 .catch(err => {
 reject(err)
 })
 })
}
/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
 export function post(url,data = {}){
 return new Promise((resolve,reject) => {
 axios.post(url,data)
 .then(response => {
 resolve(response.data);
 },err => {
 reject(err)
 })
 })
 }

第三步

在main.js中引入

import {post,get} from './utils/http'
//定义全局变量
Vue.prototype.$post=post;
Vue.prototype.$get=get;

最后在组件里直接使用

mounted(){
 this.$post('/api/v2/movie/top250')
 .then((response) => {
 console.log(response)
 })
 },

其余的方法一样

总结

以上所述是小编给大家介绍的vue中axios的封装问题(简易版拦截,get,post),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

文档

vue中axios的封装问题(简易版拦截,get,post)

vue中axios的封装问题(简易版拦截,get,post):第一步还是先下载axios npm install axios --save 第二步/src/utils/目录下建立一个htttp.js import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request
推荐度:
标签: VUE get post
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top