vue：axios二次封装

模块化编程思想部分前后端，哈，道理都通

1、环境：

基于框架：vue 基于http库：axios

2、步骤

前提：使用vue脚手架创建一个项目或者基于已存在的项目测试 1，在工程目录中安装axios

npm install axios

2，在项目目录的src文件夹下新建utils文件夹，在该文件夹内新建http-service.js文件，内容如下代码块

import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL ='http://XXX.XXX.XXX.XXX:9001'; //填写域名 //http request 拦截器 axios.interceptors.request.use(   config => {     config.data = JSON.stringify(config.data);     config.headers = {       'Content-Type':'application/x-www-form-urlencoded'     }     return config;   },   error => {     return Promise.reject(err);   } ); //响应拦截器即异常处理 axios.interceptors.response.use(response => {     return response }, err => {     if (err && err.response) {       switch (err.response.status) {         case 400:             console.log('错误请求')           break;         case 401:             console.log('未授权，请重新登录')           break;         case 403:           console.log('拒绝访问')           break;         case 404:           console.log('请求错误,未找到该资源')           break;         case 405:           console.log('请求方法未允许')           break;         case 408:           console.log('请求超时')           break;         case 500:           console.log('服务器端出错')           break;         case 501:           console.log('网络未实现')           break;         case 502:           console.log('网络错误')           break;         case 503:           console.log('服务不可用')           break;         case 504:           console.log('网络超时')           break;         case 505:           console.log('http版本不支持该请求')           break;         default:           console.log(`连接错误${err.response.status}`)       }     } else {       console.log('连接到服务器失败')     }     return Promise.resolve(err.response) }) /**  * 封装get方法  * @param url  * @param data  * @returns {Promise}  */ export function fetch(url,params={}){   return new Promise((resolve,reject) => {     axios.get(url,{       params:params     })     .then(response => {       resolve(response.data);     })     .catch(err => {       reject(err)     })   }) } /**  * 封装post请求  * @param url  * @param data  * @returns {Promise}  */  export function post(url,data = {}){    return new Promise((resolve,reject) => {      axios.post(url,data)           .then(response => {             resolve(response.data);           },err => {             reject(err)           })    })  }  /**  * 封装patch请求  * @param url  * @param data  * @returns {Promise}  */ export function patch(url,data = {}){   return new Promise((resolve,reject) => {     axios.patch(url,data)          .then(response => {            resolve(response.data);          },err => {            reject(err)          })   }) }  /**  * 封装put请求  * @param url  * @param data  * @returns {Promise}  */ export function put(url,data = {}){   return new Promise((resolve,reject) => {     axios.put(url,data)          .then(response => {            resolve(response.data);          },err => {            reject(err)          })   }) }

3，在项目目录的src文件夹下新建api文件夹，在该文件夹内新建apiUser.js文件，此文件是各个模块调用后端接口的入口，如果模块多了可以分文件夹，这里只写了一个哦 内容如下代码块

import { fetch } from '@/utils/http-service' /** * 下面是获取数据的接口 */ export default {   /**  * 接口XXX * 参数：paramObj * 方式：fetch/post/patch/put */   getAll: function(paramObj){       //return post('/api.php?ac=v2_djList',paramObj);       return fetch('/api/user/getAll');    }  // getById: (paramObj) => {     //return post('/api?ac=v2_djList',paramObj);   //  return request.fetch('/api/user/getAll');  //} //getAll: function(paramObj){   //return post('/api.php?ac=v2_djList',paramObj);   //return fetch('/api/user/getAll');  //}, }

4，测试使用 在你的vue中加入

<template> ... </template> <script> //导入 import userRequest from '@/api/userApi'     export default {     methods: {             //findAll() {//查询所有             //    this.$http.get("http://XXX.xxx.xxx.xxx:xxx/api/user/getAll").then((res) => {                     //debugger;            //         this.users = res.data;             //    });            // },             findAll2: function(){                 //this.$server.exam().then(data => {                  // console.log(data);                 //  this.users = data;                // })                                 userRequest.getAll().then(data => {                   console.log(data);                   this.users = data;                 })             }         } </script>