原生 Ajax 封装 和 Axios 二次 封装

1 npm install axios

 1 const axios = require('axios')
 2 
 3 axios.get('url?id=xxx')
 4      .then(res => {
 5        console.log(res)
 6      })
 7      .catch(err =>{
 8        console.log(err)
 9      })
10 //or
11 axios.get('url',{
12   params:{
13     id:'xxxxx'
14   }
15     })
16    .then(res =>{
17      console.log(res)
18    })
19    .catch(err =>{
20        console.log(err)
21      })

axios.post('url',{name:'owen'})
     .then(res =>{
       console.log(res)
     })
     .catch(err =>{
       console.log(err)
     })

1 axios.all([axios.get('url1'),axios.get('url2')])

  1 axios({
  2   method:'get', // default is get 
  3   url:'url', // request  url
  4   data:{ // 仅支持post，put和patch方法，数据作为请求主体发送 ( only the post,put and patch methods are supported, and the data is sent as the request body )
  5   /* 浏览器仅支持传递 formdata, file, blob （the browser only supports passing formdata, file and blob)
  6      node 仅支持传递 stream, buffer (the node only supports passing stream, buffer)
  7   */
  8     name:'owen'
  9   },
 10   baseurl:'base/url', // 除非url是绝对路径，否则将baseurl添加到url的前面 (add baseurl to then front of the url unless the url is an absolute path)
 11   transformrequest: [function (data, headers) {
 12     // 可以修改发送的请求数据和请求头，只支持put，post和patch，回调函数必须返回buffer，arraybuffer，formdata或stream数据
 13     // can modify the sent request data and request header,only support put, post and patch.
 14     // callback must return buffer, arraybuffer, formdata or stream data
 15     
 16     // do whatever you want to transform the data
 17 
 18     return data;
 19   }],
 20   transformresponse: [function (data) {
 21      // 修改响应数据，再传递给 then或catch 方法 （modify the response data and pass it to the then or catch method)
 22     // do whatever you want to transform the data
 23 
 24     return data;
 25   }],
 26   headers: {'x-requested-with': 'xmlhttprequest'}, // 自定义请求头 (custom request header)
 27   params:{ // 添加到url尾部的参数，一般用于get 和 delete（ parameters addde to the end of the url,generally used for get and delete )
 28     id:'xxx'
 29   },
 30    paramsserializer: function (params) { //序列化 [params] (https://www.npmjs.com/package/qs)
 31     return qs.stringify(params, {arrayformat: 'brackets'})
 32   },
 33   timeout:1000,// default is 0 , 设置请求超时时间，单位毫秒 （ set request timeout in milliseconds )
 34   withcredentials: true, // default is false, 跨域时是否携带cookie（ whether to carry cookies when crossing domains )
 35   adapter: function (config) {
 36     /*拦截响应数据*/
 37       // at this point:
 38     //  - config has been merged with defaults
 39     //  - request transformers have already run
 40     //  - request interceptors have already run
 41     
 42     // make the request using config provided
 43     // upon response settle the promise
 44       return new promise(function(resolve, reject) {
 45   
 46     var response = {
 47       data: responsedata,
 48       status: request.status,
 49       statustext: request.statustext,
 50       headers: responseheaders,
 51       config: config,
 52       request: request
 53     };
 54 
 55     settle(resolve, reject, response);
 56 
 57     // from here:
 58     //  - response transformers will run
 59     //  - response interceptors will run
 60 
 61       /**
 62        * resolve or reject a promise based on response status.
 63        *
 64        * @param {function} resolve a function that resolves the promise.
 65        * @param {function} reject a function that rejects the promise.
 66        * @param {object} response the response.
 67        */
 68         function settle(resolve, reject, response) {
 69             var validatestatus = response.config.validatestatus;
 70             if (!validatestatus || validatestatus(response.status)) {
 71               resolve(response);
 72             } else {
 73               reject(createerror(
 74                 'request failed with status code ' + response.status,
 75                 response.config,
 76                 null,
 77                 response.request,
 78                 response
 79               ));
 80             }
 81           };
 82         /**
 83          * create an error with the specified message, config, error code, request and response.
 84          *
 85          * @param {string} message the error message.
 86          * @param {object} config the config.
 87          * @param {string} [code] the error code (for example, 'econnaborted').
 88          * @param {object} [request] the request.
 89          * @param {object} [response] the response.
 90          * @returns {error} the created error.
 91          */
 92         function createerror(message, config, code, request, response) {
 93           var error = new error(message);
 94         return enhanceerror(error, config, code, request, response);
 95           }
 96 
 97         /**
 98          * update an error with the specified config, error code, and response.
 99          *
100          * @param {error} error the error to update.
101          * @param {object} config the config.
102          * @param {string} [code] the error code (for example, 'econnaborted').
103          * @param {object} [request] the request.
104          * @param {object} [response] the response.
105          * @returns {error} the error.
106          */
107         function enhanceerror(error, config, code, request, response) {
108             error.config = config;
109             if (code) {
110               error.code = code;
111             }
112 
113             error.request = request;
114             error.response = response;
115             error.isaxioserror = true;
116 
117             error.tojson = function() {
118               return {
119                 // standard
120                 message: this.message,
121                 name: this.name,
122                 // microsoft
123                 description: this.description,
124                 number: this.number,
125                 // mozilla
126                 filename: this.filename,
127                 linenumber: this.linenumber,
128                 columnnumber: this.columnnumber,
129                 stack: this.stack,
130                 // axios
131                 config: this.config,
132                 code: this.code
133               };
134             };
135           return error;
136         }
137     });
138   },
139   auth:{ //  表示应使用http basic身份验证，并提供凭据 ( indicates that http basic auth should be used, and supplies credentials. )
140     user:'xxx',
141     password:'***'
142   },
143   responsetype: 'json',/* 服务器响应的数据类型（ the server response data type ） 
144                          支持 arraybuffer, blob, document, json, text, stream 
145                         */
146   responseencoding:'utf8', // 用于解码响应的编码 (encoding for decoding the response )
147   xsrfcookiename: 'xsrf-token', // default is xsrf-token , csrf令牌cookie 名称
148   xsrfheadername: 'x-xsrf-token', //default is x-xsrf-token, xsrf标记值的http标头的名称
149 onuploadprogress: function (progressevent) { //上传进度事件 （handling of progress events for uploads ）
150     console.log(progressevent)
151   },
152 ondownloadprogress: function (progressevent) { // 下载进度事件 （ handling of progress events for downloads）
153    console.log(progressevent)
154   },
155 maxcontentlength: 2000, // 允许响应内容的最大字节 （defines the max size of the http response content in bytes allowed）
156 validatestatus: function (status) { // 返回给定http状态范围, 如果状态在给定范围内，响应数据传给`then` ，否则传给 `catch` ( returns the given http status range, if the status is within the give range, the respones data is passed to `then`, otherwise passed to `catch` ) 
157     return status >= 200 && status < 300; // default
158   },
159   maxredirects: 5, // default is 5  // 定义node 中最大重定向数  ( defines the maximunn number of redirects in node )
160   socketpath: null, //  default is null 定义要在node.js中使用的 unix socket
161   httpagent: new http.agent({ keepalive: true }), // node 中 http 和 https 的代理
162   httpsagent: new https.agent({ keepalive: true }),// http://nodejs.cn/api/http.html
163   proxy: { // 代理配置
164     host: '127.0.0.1',
165     port: 9000,
166     auth: {
167       username: 'mikeymike',
168       password: 'rapunz3l'
169           }
170    },
171     canceltoken: new canceltoken(function (cancel) { // 取消请求的 token
172   })
173   })  
174   .then(res =>{
175        console.log(res)
176      })
177   .catch(err =>{
178        console.log(err)
179      })

const instance = axios.create({
  baseurl: 'base/url'
});

1 instance.defaults.headers.common['authorization'] = auth_token;
2 instance.defaults.headers.post['content-type'] = 'application/x-www-form-urlencoded';

1 axios.interceptors.request.use(function (config) {
2     return config;
3   }, function (error) {
4     return promise.reject(error);
5   });

1 axios.interceptors.response.use(function (response) {
2     // do something with response data
3     return response;
4   }, function (error) {
5     // do something with response error
6     return promise.reject(error);
7   });

1 const myinterceptor = axios.interceptors.request.use(function () {/*...*/});
2 axios.interceptors.request.eject(myinterceptor);

  1 /**
  2   * @desc: axios封装
  3   * @author: ggw 
  4   * @module: axios
  5   * @description: 配合使用 饿了么的 message和loading
  6   * 
  7   */
  8  import axios from 'axios';
  9  import qs from 'qs';
 10  import {
 11      message,
 12      loading
 13  } from 'element-ui';
 14  
 15  import router from '../router'; 
 16  let loading;
 17  let headernone = {
 18      'content-type': 'application/x-www-form-urlencoded; charset=utf-8'
 19  };
 20  let headertwo = {
 21      'content-type': 'application/json; charset=utf-8'
 22  };
 23  let baseurl = window.location.origin ;
 24 
 25 
 26  /** 
 27   * @description: 定义初始化loading
 28   * @method: startloading 
 29   */
 30   const startloading = () => {
 31      loading = loading.service({
 32          target: '.content-box',
 33          background: 'rgba(220, 220, 220, 0.51)'
 34      });
 35  };
 36  
 37 
 38  let count = 0;
 39  /** 
 40   * @description: 显示loading 同时多个发送请求 只开启一次loading
 41   * @method: showloading  && hideloading
 42   */
 43   const showloading = () => {
 44      if (count === 0) startloading();
 45      count++;
 46  };
 47   const hideloading = () => {
 48      if (count <= 0) return;
 49      count--;
 50      if (count === 0) {
 51          settimeout(() => {
 52             loading.close();
 53          }, 300);
 54      }
 55  };
 56 
 57  export let filiter = r => {
 58 
 59      for (let item of object.keys(r)) {
 60          if (r[item] === ' ' || r[item] === '') {
 61              delete r[item];
 62          }
 63      }
 64  };
 65  /** 
 66   * @description: 出口
 67   * @exports api
 68   * @param:options 必须是对象
 69   * options 对象为 axios对应参数
 70   */
 71  export default (options) => {
 72      /** 
 73       * @description: 用来初始化承诺的回调。
 74       * 这个回调被传递了两个参数：
 75       * 一个解析回调用一个值或另一个承诺的结果来解析承诺，
 76       * 以及一个拒绝回调，用来拒绝承诺的原因或错误。
 77       * @constructor: promise
 78       */
 79      return new promise((resolve, reject) => {
 80          const instance = axios.create({
 81              withcredentials: true,
 82              headers: headernone,
 83              baseurl
 84          });
 85          // 请求拦截器
 86          instance.interceptors.request.use(config => {
 87               let {load = true} = config.data || config.params || {} ;
 88              if (load) showloading();
 89              //  过滤无值参数
 90              if (config.params) {
 91                 delete config.params.load;
 92                  filiter(config.params);
 93                 } else if (config.data) {
 94                  filiter(config.data);
 95                 delete config.data.load;
 96                 }
 97              if (
 98                  config.method.tolocalelowercase() === 'post' ||
 99                  config.method.tolocalelowercase() === 'put'
100              ) {
101                  // json 格式传递
102                  if (config.json) {
103                      config.headers = headertwo;
104                  } else {
105                      config.data = qs.stringify(config.data);
106                      config.data = config.data + '&t=' + date.now();
107                  }
108              }
109              return config;
110          }, error => {
111               hideloading();
112              return promise.reject(error);
113          });
114          // 响应拦截器
115          instance.interceptors.response.use(response => {
116             settimeout(hideloading,0);
117              let data;
118              // ie9时response.data是undefined，因此需要使用response.request.responsetext(stringify后的字符串)
119              if (!response.data ) {
120                  data = response.request.responsetext;
121              } else {
122                  data = response.data;
123              }
124 
125              switch (data.code) { // 接口定义字段
126                  case '001':
127                      message({
128                          showclose: true,
129                          message: data.msg || '未知错误,请联系管理员',
130                          type: 'error'
131                      });
132                      router.push({
133                          path: '/login'
134                      });
135                      break;
136                 default:
137              }
138              return data;
139          }, err => {
140            hideloading();
141 
142              if (err && err.response) {
143                  let msg = {
144                      400: '请求错误',
145                      401: '未授权，请登录',
146                      403: '拒绝访问',
147                      404: `请求地址出错: ${err.response.request.responseurl}`,
148                      408: '请求超时',
149                      500: '服务器内部错误',
150                      501: '服务未实现',
151                      502: '网关错误',
152                      503: '服务不可用',
153                      504: '网关超时',
154                      505: 'http版本不受支持'
155                  };
156                  let status = parseint(err.response.status,10);
157                  message({
158                      showclose: true,
159                      message: msg[status] || '',
160                      type: 'error'
161                  });
162              } else {
163                  message({
164                      message: err.config ? `请求地址出错: ${err.config.url}` : err,
165                      type: 'error'
166                  });
167              }
168 
169              return promise.reject(err);
170          });
171          // 请求
172          instance(options)
173              .then(res => {
174                  resolve(res);
175                  return false;
176              })
177              .catch(error => {
178                    reject(error);
179              });
180      });
181  };

import axios from './api';

const get = (url, data) => {
    return axios({
      url,
      method: 'get',
      params:data
    });
  };
const post = (url, data,json) => {
    return axios({
        url,
        method: 'post',
        data,
        json
    });
    };
const del = (url, data) => {
return axios({
    url,
    method: 'delete',
    params:data
});
};
const put = (url, data,json) => {
    return axios({
        url,
        method: 'put',
        data,
        json
    });
    };

export default {
    get,
    post,
    del,
    put
};

import vue from 'vue';

import api from './api';

vue.prototype.$api = api;

this.$api.get(url,data,isjson);