手记

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
 });
1人推荐
随时随地看视频
慕课网APP