axio.js封装和环境配置

最新推荐文章于 2024-05-18 15:09:49 发布

卡姿兰大长腿

最新推荐文章于 2024-05-18 15:09:49 发布

阅读量502

点赞数

本文链接：https://blog.csdn.net/weixin_46382477/article/details/108144848

版权

vue 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

一、 axios的封装
1.1在src根目录新建providers文件，以及添加几个主要的文件
|—providers
|-----util.js 工具函数
|-----api.js 接口地址
|-----axios.js 封装axios的文件

mkdir providers
touch util.js api.js axios.js

1.2 配置工作环境（dev,test,build）
安装：

yarn add cross-env -D

在package.json里配置：

"scripts": {
    "test":"cross-env scene=test webpack --config webpack.config.js",
    "dev":"cross-env scene=dev webpack-dev-server --config webpack.config.js",
    "build":"cross-env scene=prod webpack --config webpack.config.js"
    },

在配置文件webpack.config.js通过内置插件DefinePlugin配置
var webpack = require(‘webpack’);

  plugins.push(new webpack.DefinePlugin({
        'sceneParam': JSON.stringify(process.env.scene),
        'laney':JSON.stringify('laney'),
        'test':'"kkkkk"'
    }));

重新启动就可以在项目中直接获取到 sceneParam 参数

1.3 添加登陆页面 pages/login.vue
参照：Element ui Form表单
https://element.eleme.cn/#/zh-CN/component/form

校验利用策略模式，和es5里的form表单验证思想一致
校验成功后，调取登陆接口

submitLogin(){
        var {pass,username} = this.ruleForm
        axios({
            method:'post',
            url:'http://localhost:8081/api/login',
            data:{
                name:username,
                password:pass
            }
        }).then((res)=>{
            
            if(res.data.statusCode==200) {
                 alert(res.data.data);
                 localStorage.setItem('token',res.data.token); //用户访问页面的钥匙
                 
                 this.$router.push({
                     path:'/home'
                 });
            } else {
                 alert(res.data.data);
            }
           
        });
           
    }

1.3 在home.vue页面调取相关接口，如何处理接口的多级回调
pages/home.vue

export default {
    data(){
        return {
            name:'laney',
            params:this.$route.query,
            infoData:{}
        }
    },
    methods:{
        getInfoList(){
            var token = localStorage.getItem('token');
            var test = {name:'laney',age:'20'}
            var mn = Qs.stringify(test);
            // this.$axios.post('http://localhost:8081/api/info',mn).then((res)=>{
            //     console.log('test kkkk-----------');
            // })
             this.$axios({
                method:'post',
                url:'http://localhost:8081/api/info',
                data:mn,
                headers:{
                    token:token
                }
            }).then((res)=>{
                if(res.data.statusCode==200) {     
                     this.infoData = res.data.result;
                     var tag = res.data.tag;
                     return this.$axios({
                            method:'post',
                            url:'http://localhost:8081/api/msg'
                        })
                } else {
                     alert(res.data.result);
                }
            }).then((res)=>{
                console.log(res.data.result)
            });
        }
    },
    mounted(){
        this.getInfoList();
    }
}
</script>

1.4 配置api

export default {
    basic:{
        login:'/api/login',
        info:'/api/info',
        msg:'/api/msg',
        hello:'/api/hello'

    }
}

1.5 在入口文件main.js进行引入

 import axios from './providers/axios.js';
 import api from './providers/api.js';
 //定义全局变量$axios
 Vue.prototype.$axios = axios;
 Vue.prototype.$api = api;

1.6 配置axios

yarn add axios -D , 已安装的可以忽略
引入axios 
import axios from 'axios';

导出的结构是：
export default {
  post, //方法名
  get,
  pull
}

封装的目的：
1.需要把一些 api 的base路径配置好，以免多次重复写入
2.项目可能传递给接口的数据有json 和 formData 都需要考虑
3.对登陆后可能权限的 token需要获取统一设置
4.对接口异常的情况需要统一处理

1.6.1 第一种方式，利用拦截器配置headers
后面讲

1.6.2 第二种方式，不利用拦截器配置headers
整体思路是在传参的时候，可以多加一个参数form(true,false), true代表需要formData , false或者不选代表json
参考： axios2.js

var typearr= {
  'json':'application/json;charset=UTF-8',
  'form':'application/x-www-form-urlencoded'
};
  post (url, params) {
      var isForm = params.form;
      if(params.form)  {
        delete params.form;
      }
      if(isForm) {
        params = Qs.stringify(params);
      }

    return new Promise((resolve,reject) => {
       return axios.post(url,params, {
          headers: {
            'X-API-TOKEN':localStorage.getItem('token'),
            'Content-Type': isForm ? typearr['form'] : typearr['json'],
            'test':'ppp'
          }
      })
        .then(response => {
          if(response.status==200){
             resolve(response.data);
          } 
          //这里不需要异常提示了， 已经在拦截器设置
          // else {
          //   Message({
          //     message: response.errorMsg,
          //     type: 'warning'
          //   });
          // }
        })
        .catch(err => {
          reject(err)
        })
      })
  },

1.7在页面中使用
以news.vue为例

 <script>
export default {
    data(){
        return {
            infoData:{}
        }
    },
    methods:{
        getInfoList2(){
            var res = this.$axios.post(this.$api.basic.info,{
                kind:'school',
                form:true
            }).then((res)=>{  
                console.log(res);
            });
        },
        
        getInfoList(){
          this.$axios.post(this.$api.basic.info,{
              kind:'school'
          },'form').then((res)=>{
              this.infoData = res.result;
                if(res.tag==1){
                    return  this.$axios.post(this.$api.basic.msg,{
                        tag:res.tag
                    })
                }
          }).then((res)=>{
              if(res.kind==2){
                    return  this.$axios.post(this.$api.basic.hello,{
                        id:res.kind
                    })
              }
          }).then((res)=>{
              console.log(res.result);
          })
  
        }
    },
    mounted(){
        this.getInfoList2();
        // this.getInfoList();
        
    }
}
</script>

1.8 拦截器的处理以及异常处理

var formData = new FormData();
formData.append('name','song');
formData.get('name');

//http request 拦截器  你给服务端 的数据 
axios.interceptors.request.use(
  config => {   
    config.headers.common = {
      'X-API-TOKEN': localStorage.getItem('token'),
      'version': '1.0',
      'Content-Type': 'application/json;charset=UTF-8'
    }
    console.log('begin');
    if (config.data.form) {
        //转化成formData格式
        // transformRequest只能用在 PUT, POST, PATCH 这几个请求方法
        config.transformRequest=[function (data) {
            //方式一
            data.name='laney';
            delete data.form;
            var ret = '';
            for (let it in data) {
              ret += it+'=' +data[it] + '&';
            }
            return ret.substring(0,ret.length-1);

            //方式二：
            // var test2 = Qs.stringify(data);
            // return test2;
          }]
        }

    return config;
  },
  error => {
    return Promise.reject(err);
  }
);

//响应拦截器即异常处理 -  -- 服务给我们的数据
axios.interceptors.response.use(response => {
    
    if (response.status === 200) {
        return Promise.resolve(response);
    } else {
        return Promise.reject(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)
})

然后开始封装函数

export default {
  /**
   * 封装post方法
   * @param url
   * @param data
   * @returns {Promise}
   * 
   */
// 方式一： 包装一个 new Promise
  // post (url, params) {
  //   return new Promise((resolve,reject) => {
  //      return axios.post(url,params)
  //       .then(response => {
  //         if(response.status==200){
  //            resolve(response.data);
  //         } else {
  //           alert(response.errorMsg);
  //         }
  //       })
  //       .catch(err => {
  //         reject(err)
  //       })
  //     })
  // },
// 方式二： 包装一个 直接利用axios自身是一个Promise对象的思想封装
  // post (url, params) {
  //      return axios.post(url,params)
  //       .then(response => {
  //         if(response.status==200){
  //           return Promise.resolve(response.data); 
  //           //注意必须要有return，相当于new Promise里的resolve，告诉接口已经获取数据
  //         } else {
  //           alert(response.errorMsg);
  //         }
  //       })
  //       .catch(err => {
  //         reject(err)
  //       })
  // },

//方式三
// 注意： axios在配置headers头的时候， 不要和上面的 拦截器重复配置
  post (url, params) {
      var isForm = params.form;
      if(params.form)  {
        delete params.form;
      }
      if(isForm) {
        params = Qs.stringify(params);
      }
      return axios({
        method: 'post',
        url:url,
        data: params
      }).then((response) => {
        
        if(response.status==200){
          return Promise.resolve(response.data)  
        } else {
          <!-- 如果设置了拦截器， 这里不需要做异常处理 -->
          alert(response.errorMsg);
        }
        },(e) => {
          return Promise.reject(e)
        }) 
        // 或者catch捕获异常
        .catch(function (error) {
          
        })
  },

//方式四：
// async post (url, params,contype) {
//     if(contype=='form'){
//       params = Qs.stringify(params);
//     }
//     var res = await axios({
//         method: 'post',
//         url:url,
//         data: params
//     });
//   return res.data;

// },

  get(url,params={}){
    return new Promise((resolve,reject) => {
      axios.get(url,{
        params:params
      })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err)
      })
    })
  },
}

1.9 异常消息提示

在axios.js里 添加
import { Message} from 'element-ui';

然后直接使用
Message({
      message: '提示信息',
      type: 'warning'
 });

整个axio.js文件

// 使用数据拦截器
import axios from 'axios';
import Qs from 'qs';
import {
  Message
} from 'element-ui';
axios.defaults.timeout = 5000;

// env_config
// dev  开发环境
// test  测试环境
// build  线上环境
var urlObj = {
  dev: 'http://localhost:8081',
  test: 'http://localhost:8081/',
  build: 'https://www.17npw.net/api/'
}
console.log(urlObj[sceneParam]);
// Message('这是一条消息提示');
axios.defaults.baseURL = urlObj[sceneParam]; //填写域名

//http request 拦截器  客户端给服务端 的数据 
axios.interceptors.request.use(
  config => {

    config.headers.common = {
      'X-API-TOKEN': localStorage.getItem('token'),
      'version': '1.0',
      'Content-Type': 'application/json;charset=UTF-8'
    }
    console.log('begin');

    if (config.data.form) {
      //转化成formData格式
      // transformRequest只能用在 PUT, POST, PATCH 这几个请求方法
      config.transformRequest = [function (data) {
        //方式一
        delete data.form;
        // var ret = '';
        // for (let it in data) {
        //   ret += it+'=' +data[it] + '&';
        // }
        // return ret.substring(0,ret.length-1);

        //方式二：
        var test2 = Qs.stringify(data);
        return test2;
      }]
    }

    return config;
  },
  error => {
    return Promise.reject(err);
  }
);

//响应拦截器即异常处理 -  -- 服务给客户端的数据进行处理
axios.interceptors.response.use(response => {
  if (response.status === 200) {
    return Promise.resolve(response);
  } else {
    return Promise.reject(response);
  }
  // return response
}, err => {
  if (err && err.response) {
    var errorMsg = '';
    switch (err.response.status) {
      case 400:
        console.log('错误请求')
        errorMsg = '错误请求';
        break;
      case 401:
        console.log('未授权，请重新登录');
        errorMsg = '未授权，请重新登录';
        break;
      case 403:
        console.log('拒绝访问')
        errorMsg = '拒绝访问';
        break;
      case 404:
        console.log('请求错误,未找到该资源')
        errorMsg = '请求错误,未找到该资源';
        break;
      case 405:
        console.log('请求方法未允许')
        errorMsg = '请求方法未允许';
        break;
      case 408:
        console.log('请求超时')
        errorMsg = '请求超时';
        break;
      case 500:
        console.log('服务器端出错')
        errorMsg = '服务器端出错';
        break;
      case 501:
        console.log('网络未实现')
        errorMsg = '请求方法未允许';
        break;
      case 502:
        console.log('网络错误')
        errorMsg = '网络错误';
        break;
      case 503:
        console.log('服务不可用')
        errorMsg = '服务不可用';
        break;
      case 504:
        console.log('网络超时')
        errorMsg = '网络超时';
        break;
      case 505:
        console.log('http版本不支持该请求')
        errorMsg = 'http版本不支持该请求';
        break;
      default:
        console.log(`连接错误${err.response.status}`)
    }

    Message({
      message: errorMsg,
      type: 'warning'
    });

  } else {
    console.log('连接到服务器失败')
  }
  return Promise.resolve(err.response)
})

export default {
  //post方法 
  //     post(url,params){
  //         return new Promise((resolve,reject)=>{
  //             return axios.post(url,params)
  //             .then((response)=>{
  //                 if(response.status==200){
  //                     resolve(response.data);
  //                 }

  //             })
  //         })

  //     },

  //     // 方式二： 包装一个 直接利用axios自身是一个Promise对象的思想封装
  //   post (url, params) {
  //        return axios.post(url,params)
  //         .then(response => {
  //           if(response.status==200){
  //             return Promise.resolve(response.data); 
  //             //注意必须要有return，相当于new Promise里的resolve，告诉接口已经获取数据
  //           } 
  //         })
  //         .catch(err => {
  //           reject(err)
  //         })
  //   },

  // //方式三
  // // 注意： axios在配置headers头的时候，会合并拦截器和函数封装里的headers的选项
  //   post (url, params) {
  //       return axios({
  //         method: 'post',
  //         url:url,
  //         data: params,
  //         headers:{
  //             'X-API-TOKEN':localStorage.getItem('token'),
  //             'Content-Type': isForm ? typearr['form'] : typearr['json'],
  //             'test':'ppp'
  //       }
  //       }).then((response) => {

  //         if(response.status==200){
  //           return Promise.resolve(response.data)  
  //         } 
  //         },(e) => {
  //           return Promise.reject(e)
  //         }) 
  //         // 或者catch捕获异常
  //         .catch(function (error) {

  //         })
  //   },
  //方式四：
  async post(url, params) {
    var res = await axios({
      method: 'post',
      url: url,
      data: params
    });
    return res.data;

  },

  /**
   * 封装patch请求
   * @param url
   * @param data
   * @returns {Promise}
   */

  patch(url, data = {}) {
    return new Promise((resolve, reject) => {
      axios.patch(url, data)
        .then(response => {
          resolve(response.data);
        })
    })
  },

  get(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, {
          params: params
        })
        .then(response => {
          resolve(response.data);
        })
    })
  },
}

卡姿兰大长腿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
axio.js封装和环境配置

一、 axios的封装1.1在src根目录新建providers文件，以及添加几个主要的文件|—providers|-----util.js 工具函数|-----api.js 接口地址|-----axios.js 封装axios的文件mkdir providerstouch util.js api.js axios.js1.2 配置工作环境（dev,test,build）安装：yarn add cross-env -D在package.json里配置："scripts":
复制链接

扫一扫