Vue中封装axios

参考:

  https://www.jianshu.com/p/7a9fbcbb1114

  https://www.cnblogs.com/dreamcc/p/10752604.html

一、安装axios

  npm i axios -S

二、创建src/utils/axios.js、src/api/api.js

  axios.js用于封装axios,api.js用于管理接口

三、axios.js

// axios.js

import axios from "axios";
// 部分数据需要存进store或取出
import store from "@/store"
// 请求错误时提示,根据需求引入不同ui
import { Toast, MessageBox } from "mint-ui";
// 根据返回值进行页面跳转
import router from "vue-router"
// 封装的获取本地token的方法
import { getToken } from "@/utils/auth"

const service = axios.create({
//   headers: {‘X-Requested-With‘: ‘XMLHttpRequest‘}, // 可以配置headers
  baseURL: "", // api的base_url
  timeout: 10000 // request timeout,默认0
});
// 请求头的设置
// axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘;

// 添加一个请求拦截器
service.interceptors.request.use(
  (config)=> {
    // Do something before request is sent
    // 获取tonken,一般是从本地获取
    // if (store.getters.token) {
    //   config.headers["token"] = getToken();
    // }
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// 添加一个响应拦截器
service.interceptors.response.use(
  (response)=> {
    // Do something with response data
    // 根据返回值做出判断
    if (response.code !== 0) {
      // 不成功时...
      if (response.code == -1) {
        // token失效时,清空缓存,跳转至登录页
        // store.commit(‘SET_TOKEN‘, ‘‘)
        // router.push({
        //   path: ""
        // })
      }else if(){

      }else{
        // 提示错误信息
        Toast({ message: response.msg, position: "top", duration: 2 * 1000 })
      }
    }else{
        // 请求成功时
        return response;
    }
  },
  (error)=> {
    // Do something with response error
    // 提示错误信息
    Toast({ message: error.message, position: "top", duration: 5 * 1000 })
    return Promise.reject(error);
  }
);

export default service

四、api.js

// api.js
import request from "@/utils/axios";

export function oneApi(val) {
  return request({
    url: "", // 接口
    method: "post", // 请求方式
    data: val, // 数据
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });
}

export function twoApi(val) {
    return request({
      url: "", // 接口
      method: "post", // 请求方式
      data: val, // 数据
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    });
  }

五、使用

  import { oneApi} from "@/api/api";

oneApi(params).then(response => {

});

原文地址:https://www.cnblogs.com/jing-zhe/p/12041175.html

时间: 2024-10-28 23:53:13

Vue中封装axios的相关文章

记vue中封装axios

文件结构: mocks:中是本地json数据 adapter.js: 调用本地数据方法 resources.js 统一接口管理 export default { fetchDict: { url: '/v1/system/fetchDcType', method: 'post' } } 重点是以下俩个文件 index.js 拦截器以及请求头设置,并添加实例属性 import Vue from 'vue'; import axios from 'axios'; import { Toast } f

vue中采用axios发送post请求

这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在运用npm install axios的时候就会默认安装qs,因此我们就得将qs引入到axios中,然后需要再通过实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 1 let qs = require

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

06 vue中使用axios跨域

本节将展示如果通过axios+proxyTable完成跨域请求并显示数据. 1.前提约束 完成nodejs,vue-cli,webpack,webpack-dev-server的安装 https://www.jianshu.com/p/eb4d9e132f62 2.操作步骤 完成vue项目中加入easytable[这时是固定数据] https://www.jianshu.com/p/bf5abb37eb3f 下载axios依赖包 cd vue-easytable cnpm install axi

vue中使用axios最详细教程

前提条件:vue-cli 项目 安装: npm npm 在main.js导入: // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype.$axios = axios; import QS from 'qs' Vue.prototype.qs = QS; 封装好的axios,拿走不送:(最好是在main.js同级目录创建一个 https.js 文件,复制粘贴下面代码,改 接口地址 就可以用) import axios from 'ax

vue中封装svg-icon组件并使用

vue中使用svg图片有很多便捷方式,在这里记录一下模仿参考的过程,仅做一标记,方便后续回来查找 附上参考地址:https://juejin.im/post/59bb864b5188257e7a427c09 1.使用vue-cli3.0脚手架运行搭建一个项目,地址 截图如下: 2.components文件下新建SvgIcon组件 文件中的代码: 原文地址:https://www.cnblogs.com/lhjfly/p/10756650.html

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')

vue中的axios封装

import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 5000;axios.defaults.headers = {'Content-Type': 'application/x-www-form-urlencoded'} axios.defaults.withCredentials = true //http request 拦截器 axios.interceptors.

vue中使用axios

1.安装axios npm: $ npm install axios -S cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 2.配置axios 在项目中新建api/index.js文件,用以配置axios api/index.js import axios from 'axios'; let http = axios.create({ baseURL: 'http://