栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

vue中使用axios的封装

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

vue中使用axios的封装

在aixos文件夹下的index.js文件中写aixos的构造函数,然后可以自己配置参数

import axios from 'axios'
import qs from 'qs'
const instance = axios.create({
    baseURL: 'http://xxx.me',
    timeout: 1000,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded;' }
});
instance.interceptors.request.use((config) => {
    if (config.method === 'post') {
//如果是post请求则进行序列化处理
 config.data = qs.stringify(config.data);
    }
    return config;
}, (error) => {
    return Promise.reject(error);
});
 instance.interceptors.response.use((res) => {
     if (res.status!==200) {
 return Promise.reject(res);
     }

     return res;
 }, (error) => {
     //404等问题可以在这里处理
     return Promise.reject(error);
 });
export default instance

在main.js文件中

import Vue from 'vue’
import axios from './axios’
Vue.prototype.KaTeX parse error: Expected 'EOF', got '写' at position 16: axios = axios; 写̲在Vue的prototype原…axios调用。

在helloworld.vue文件中
如果是get请求,则

this.$axios({
  method: "get",
  url: "/api/zzz"
})
  .then(res => {
    //请求成功返回体的数据res
  })
  .catch(err => {
    //请求失败返回体的数据err
  });

如果是post请求,则

this.$axios({
  method: "post",
  url: "/api/zzz",
  data:{
   name:"jianguang"
  }
})
  .then(res => {
    //请求成功返回体的数据res
  })
  .catch(err => {
    //请求失败返回体的数据err
 });
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/240677.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号