博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue中axios的封装(简易版拦截,get,post)
阅读量:6854 次
发布时间:2019-06-26

本文共 1637 字,大约阅读时间需要 5 分钟。

第一步还是先下载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)      })  },其余的方法一样

转载地址:http://fwfyl.baihongyu.com/

你可能感兴趣的文章
Promise面试题,控制异步流程
查看>>
第一个springboot项目
查看>>
人工智能期末笔记
查看>>
如何正确地给图像添加高斯噪声
查看>>
HTML5 Geolocation API的正确使用
查看>>
从需求到数据到改进,如何形成闭环
查看>>
PM2自动部署代码流程总结
查看>>
[LeetCode] 432. All O`one Data Structure
查看>>
关于只触发自身绑定的事件
查看>>
前端进阶系列(三):HTML5新特性
查看>>
线性一致性和 Raft
查看>>
异步IO的应用
查看>>
Apache Ignite——新一代数据库缓存系统
查看>>
Laravel 5.8.2 发布,PHP 开发框架
查看>>
Django中的文件上传(利用class-based view)
查看>>
微控制器和微处理器市场持续增长
查看>>
python的Web框架,Django模型系统二,模型属性,及数据库进阶查询 ...
查看>>
sysbench、iostat测试服务器的iops
查看>>
好程序员Web前端开发入门之网页制作三要素
查看>>
美国要认输?美国防部称或将在5G竞赛中落后中国 ...
查看>>