继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

vue中使用axios的封装

东方既白233
关注TA
已关注
手记 44
粉丝 38
获赞 153

在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
 });
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP