Vue | Axios封装

最终调用顺序如下： 

1. /js/axios.js封装axios方法：

// 1.创建实例
const service = axios.create({
    // baseURL
    timeout: 30000 //设置超时时间
  });

// 2.添加拦截器
// 添加请求拦截器
service.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么..
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
  // 在响应之前做点什么...
  return response;
}, function (error) {
    // 对响应错误做点什么
   if(error.response){
     switch (error.response.status) {
       case '404': router.push('/blank');break;
     //case .... 更多错误响应码
       default: break;
     }
  }
  return Promise.reject(error);
});

// 封装get/post/put等
function getAll(url, params = {}) {
  params.t = new Date().getTime();
  return service({
    url: url,
    method: 'get',
    header: {},
    params
  })
}
function getById(url,uid) {
  let params = {uid:uid};
  return service({
    url: url,
    method: 'get',
    header: {},
    params: params
  })
}
function post(url, data={}){
  return service({
    url: url,
    method: 'post',
    headers: {
      'Content-Type':'application/json;charset=UTF-8'
    },
    data:JSON.stringify(data)
  })
}

// 使用module.export = {} 可能会报错
// 使用es6
export default {
  service,getAll,getById,post
}

2./api/userApi定义接口调用1中封装好的方法

返回的都是Promise实例，在前端之前调用该api，就可以直接调用then/catch

import UserAxios from '../js/axios'

function getAllUser(){
  return UserAxios.getAll('/api/user/getAll')
}
function getUserById(uid){
  return UserAxios.getById('/api/user/getById',uid)
}

export default {
  getAllUser,getUserById
}

3. server(node)中接受请求并处理

// 根据Id获取用户
router.get('/getById',(req,res)=>{
  let sql = $sql.user.getById;
  let resource = url.parse(req.url,true);
  let uid = resource.query.uid;
  conn.query(sql, uid, (err,result)=>{
    if(result){
      console.log(result)
       res.json({'info':result})
    }
  })
});

4.前端调用

import UserApi from '../api/userApi' 
handleGetUserById(){
    UserApi.getUserById(this.uid).then(res=>{
      console.log(res.data);
    })
  },