014、axios请求封装

原创 2018年04月17日 17:56:38

axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

1、封装文件(http.js)

import axios from 'axios';
import { Message } from 'element-ui';

axios.defaults.timeout = 5000;
axios.defaults.baseURL = 'https://dict.youdao.com/';


//http request 拦截器
axios.interceptors.request.use(
  config => {
    // const token = getCookie('名称');注意使用的时候需要引入cookie方法,推荐js-cookie
    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:"/A",
        querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(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)
          })
   })
 }

 /**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.patch(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

 /**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.put(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

2、全局定义

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

3、使用

this.get('/ugc/wordjson',{page:1})
    .then(res=>console.log(res))

参考网站:https://www.npmjs.com/package/axios
https://www.kancloud.cn/yunye/axios/234845

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jiuwanli666/article/details/79978408

vue-cli+axios解决跨域问题

1、首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from ‘axi...
  • Derllk
  • Derllk
  • 2018-03-17 22:19:29
  • 32

vue2+axios 增删改查

vue2.0以后vue-resource已经不再更新,尤大大也说不再推荐,开始推荐axios,这两天学了一下axios,整理了一套增删改查 以下是官网介绍的一些axios内容 Axios ...
  • janessssss
  • janessssss
  • 2017-10-13 17:02:35
  • 1194

记 Vue +axios 使用和http请求封装

1.安装axios$ npm install axios文档:https://github.com/axios/axios2.新建service文件夹,新建http.js引入axios,对http请求...
  • liuzhumin123
  • liuzhumin123
  • 2018-04-01 11:49:14
  • 226

在Vue-cli里基于axios封装复用请求

写在前面:自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解。使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代...
  • OBKoro1
  • OBKoro1
  • 2017-11-05 16:00:25
  • 3394

【vue+axios】一个项目学会前端实现登录拦截

一个项目学会vue全家桶+axios实现登录、拦截、登出功能,以及利用axios的http拦截器拦截请求和响应。 前言该项目是利用了Github 提供的personal token作为登录token,...
  • wojiaomaxiaoqi
  • wojiaomaxiaoqi
  • 2017-11-07 18:36:04
  • 75

axios使用

axios和vue-resource一样,是一个vue中操作http的插件,遵循promise,vue官方也推荐使用axios。 安装axios npm i axios -S a...
  • thatway_wp
  • thatway_wp
  • 2018-01-09 10:20:33
  • 59

基于axios的ajax请求封装

import axios from 'axios' // 默认请求配置 let defaultConfig = { method: 'GET', baseURL: process.env.B...
  • scorpio_h
  • scorpio_h
  • 2018-02-27 16:40:40
  • 71

axios请求封装和异常统一处理

当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案...
  • u012702547
  • u012702547
  • 2018-01-15 16:35:59
  • 1653

axios

axios基于http客户端的promise,面向浏览器和nodejs特色浏览器端发起XMLHttpRequests请求node端发起http请求支持Promise API监听请求和返回转化请求和返回...
  • koufulong
  • koufulong
  • 2017-07-02 00:01:11
  • 214

axios 一个基于promise的HTTP库

特征 从浏览器中创建XMLGHTttpRequests对象 从nodejs中创建http请求 支持PromiseAPI 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客...
  • Tan_D
  • Tan_D
  • 2018-01-05 14:12:18
  • 210
收藏助手
不良信息举报
您举报文章:014、axios请求封装
举报原因:
原因补充:

(最多只允许输入30个字)