zoukankan      html  css  js  c++  java
  • axios简单封装

    写在最前面

    新手前端刚刚接触vue,感觉真的好用。项目中需要使用axios,然后学习了一下。借鉴网上一些大佬的经验,现在分享一下axios的简单封装,如果有什么错误的地方,请大家指出。

    axios安装

    npm install axios --save

    最最简单的使用

    首先在src目录下创建axios文件夹,然后创建index.js和fetch.js两个文件。

    fetch.js文件代码如下:

    import axios from 'axios'
    //定义fetch函数,config为配置
    export function fetch(config){
       //返回promise对象
       return new Promise((resolve,reject) =>{
           //创建axios实例,把基本的配置放进去
           const instance = axios.create({
               //定义请求文件类型
               headers:{
                  'Content-Type': 'application/json',
                },      
                timeout: 3000,
                //定义请求根目录
                baseURL: 'http://www.xxx.com/'
            });
           //请求成功后执行的函数
            instance(config).then(res =>{
                console.log(res);
                resolve(res);
            //失败后执行的函数
            }).catch(err => {
                console.log(err);
                reject(err);
            })
        });
    }
    

    关于自定义const instance = axios.create({ }) 可以有很多配置,我只是写了最基本的几个,官方都给了详细说明,我这里也贴一下。
    地址:https://www.kancloud.cn/yunye...

    {
      // `url` 是用于请求的服务器 URL
      url: '/user',
    
      // `method` 是创建请求时使用的方法
      method: 'get', // 默认是 get
    
      // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
      // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
      baseURL: 'https://some-domain.com/api/',
    
      // `transformRequest` 允许在向服务器发送前,修改请求数据
      // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
      // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
      transformRequest: [function (data) {
        // 对 data 进行任意转换处理
    
        return data;
      }],
    
      // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
      transformResponse: [function (data) {
        // 对 data 进行任意转换处理
    
        return data;
      }],
    
      // `headers` 是即将被发送的自定义请求头
      headers: {'X-Requested-With': 'XMLHttpRequest'},
    
      // `params` 是即将与请求一起发送的 URL 参数
      // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
      params: {
        ID: 12345
      },
    
      // `paramsSerializer` 是一个负责 `params` 序列化的函数
      // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
      paramsSerializer: function(params) {
        return Qs.stringify(params, {arrayFormat: 'brackets'})
      },
    
      // `data` 是作为请求主体被发送的数据
      // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
      // 在没有设置 `transformRequest` 时,必须是以下类型之一:
      // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
      // - 浏览器专属:FormData, File, Blob
      // - Node 专属: Stream
      data: {
        firstName: 'Fred'
      },
    
      // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
      // 如果请求话费了超过 `timeout` 的时间,请求将被中断
      timeout: 1000,
    
      // `withCredentials` 表示跨域请求时是否需要使用凭证
      withCredentials: false, // 默认的
    
      // `adapter` 允许自定义处理请求,以使测试更轻松
      // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
      adapter: function (config) {
        /* ... */
      },
    
      // `auth` 表示应该使用 HTTP 基础验证,并提供凭据
      // 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
      auth: {
        username: 'janedoe',
        password: 's00pers3cret'
      },
    
      // `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
      responseType: 'json', // 默认的
    
      // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
      xsrfCookieName: 'XSRF-TOKEN', // default
    
      // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
      xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的
    
      // `onUploadProgress` 允许为上传处理进度事件
      onUploadProgress: function (progressEvent) {
        // 对原生进度事件的处理
      },
    
      // `onDownloadProgress` 允许为下载处理进度事件
      onDownloadProgress: function (progressEvent) {
        // 对原生进度事件的处理
      },
    
      // `maxContentLength` 定义允许的响应内容的最大尺寸
      maxContentLength: 2000,
    
      // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte
      validateStatus: function (status) {
        return status >= 200 && status < 300; // 默认的
      },
    
      // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
      // 如果设置为0,将不会 follow 任何重定向
      maxRedirects: 5, // 默认的
    
      // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项:
      // `keepAlive` 默认没有启用
      httpAgent: new http.Agent({ keepAlive: true }),
      httpsAgent: new https.Agent({ keepAlive: true }),
    
      // 'proxy' 定义代理服务器的主机名称和端口
      // `auth` 表示 HTTP 基础验证应当用于连接代理,并提供凭据
      // 这将会设置一个 `Proxy-Authorization` 头,覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
      proxy: {
        host: '127.0.0.1',
        port: 9000,
        auth: : {
          username: 'mikeymike',
          password: 'rapunz3l'
        }
      },
    
      // `cancelToken` 指定用于取消请求的 cancel token
      // (查看后面的 Cancellation 这节了解更多)
      cancelToken: new CancelToken(function (cancel) {
      })
    }
    
    

    index.js 文件代码如下:

    //引入fetch.js文件
    import { fetch } from './fetch' 
    //定义获取数据的函数getData(),其中url,type,data对应fetch(config)中的config
    export  function getData(url,type,data) {
    //如果type为空,默认为post方法,也可以自己改成get
        if(type==='')
          type = 'post';
        return fetch({
    //这里的url为baseURL下接口地址,如baseURL为'www.baidu.com',接口地址为'www.baidu.com/api/getdata',那么url里就写'api/getdata'
          url: url,
          method: type,
          data: data,
        })
    }
    

    这样基本的功能就有了,然后在页面上使用的代码如下(假设页面为home.vue,在src/pages目录下):

    <script>
    import { getData } from './../axios'
    export default {
        created: function () {
            //a,b等于1,2
            this.foo(1,2)
        }
        methods: {
            foo: function(a,b) {
                //a,b为用户传入的参数,中间方法为'',默认'post'
                getData('api/getdata', '', {a, b}).then(res => {
                      console.log(res);
                  }, err => {
                      console.log(err);
                  })
            }
        }
    }
    
    </script>
    

    至此代码就都ok了,基本的功能都能用了。关于拦截器和错误处理,官方都有详细说明,而且很多大佬进行了更详尽的封装。刚接触vue的新手,如果上面有错误的地方,欢迎大家指出。

    原文地址:https://segmentfault.com/a/1190000012743382

  • 相关阅读:
    创建类以及引用一个类
    修改hosts文件
    微信第三方登录接口开发
    Android定位
    Leetcode 102. Binary Tree Level Order Traversal
    Leetcode 725. Split Linked List in Parts
    Leetcode 445. Add Two Numbers II
    Leetcode 328. Odd Even Linked List
    Leetcode 237. Delete Node in a Linked List
    Leetcode 234. Palindrome Linked List
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9959894.html
Copyright © 2011-2022 走看看