精华内容
下载资源
问答
  • vue axios封装 axios 请求

    2020-03-27 15:04:31
    vue axios封装 axios 请求
  • 下面小编就为大家分享一篇基于axios封装fetch方法及调用实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • axios封装

    2019-07-24 17:07:28
    请求接口需要调用 axios封装代码块

    在这里插入图片描述
    在这里插入图片描述

    请求接口需要调用

    请求接口需要调用

    axios封装代码块

    在这里插入图片描述

    展开全文
  • axios封装 及 使用方法

    2019-12-15 20:42:31
    axios封装 及 使用方法 axios安装 npm install axios --save axios封装 /** * Created by superman on 17/2/16. * http配置 */ import axios from 'axios' import router from '../router' // axios 配置 axios....

    axios封装 及 使用方法

    axios安装

    npm install axios --save

    axios封装
    /**
     * Created by superman on 17/2/16.
     * http配置
     */
    import axios from 'axios'
    import router from '../router'
    
    // axios 配置
    axios.defaults.timeout = 5000
    axios.defaults.baseURL = ''// 这里面放域名
    
    // http request 拦截器
    // 拦截器是面对报错 或者 抛出错误之后 做出的一系列行动
    axios.interceptors.request.use(
      config => {
        // config.headers.Authorization = `token ${store.state.token}`
        return config
      },
      err => {
        return Promise.reject(err)
      },
    )
    
    // http response 拦截器
    axios.interceptors.response.use(
      response => {
        return response
      },
      error => {
        console.log(error.response, '===================')
        if (error.response) {
          switch (error.response.status) {
            case 404:
              // 404 清除token信息并跳转到登录页面
              localStorage.removeItem('username');
              
              // 只有在当前路由不是登录页面才跳转
              router.currentRoute.path !== '/' &&
              router.replace({
                path: '/',
                // query: { redirect: router.currentRoute.path },
              })
          }
        }
        // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
    
    

    这里面添加了 拦截器 可以遇到路由报错后,做出一系列的行动。

    axios封装调用

    另一个文件内写api接口 后面只需要引用这个api文件 调用抛出的相对应的promise 就可以了。

    import request from '../utils/http'
    
    import qs from "qs";
    
    export function getJsonData(params){
        return request({
            url: './data.json',
            method:'get',
            params
        })
    }
    

    输出页面 获取数据

    <script>
    import { getJsonData } from '../api/api'
    import qs from 'qs'
    import request from '../utils/request'
    
    export default {
        data(){
            return{
                
            }
        },
        created(){
            getJsonData().then((res)=>{
                console.log(res)
            })
        }
    }
    </script>
    

    没啥文采 就上代码就完事了- -

    展开全文
  • 基于axios封装fetch方法及调用

    千次阅读 2017-06-28 09:56:08
    基于axios封装fetch方法及调用

    基础axios用法请看axios官网

    //依赖于axios对私有ajax进行修改
    import Qs from 'qs'
    import axios from 'axios'
    import router from 'router/index'
    import {errorPrompt, loading, closeLoading} from 'util/util'
    
    export const status = {
      SUCCESS: '100',
      NET_ERR: '101',   // 网络连接异常,请稍候再试
      BIZ_ERR: '103', // 业务请求异常
      NO_AUTH: '104'
    
    }
    
    export function fetch(options) {
      return new Promise((resolve, reject) => {
        let instance = axios.create({
          baseURL: process.env.BASE_API,
          timeout: 2000,
          headers: {
            // "tracecode": window.encodeURIComponent(JSON.stringify({"ua":"","cv":"20161230","token":"3dwo0onUUsPKVJcP8tk","os":"windows10","app":"kind","ws":"1*1","pkey":"f8caf7d7-a5d4-4710-b06f-28a922b6a467"}))
            "tracecode": commonBizHeader(isManager(options)),
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          transformRequest: [function (data) {
            // Do whatever you want to transform the data
            let ret = ''
            for (let it in data) {
              ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
          }]
        });
    
        instance.interceptors.request.use(function (response) {
          // 请求拦截
          loading();
          return response;
        }, function (error) {
          console.log('error 请求拦截 : ', error)
          return Promise.reject(error);
        });
    
        instance(options)
            .then(response => {
              const res = response.data;
              if (res.errorCode != status.SUCCESS) {
                switch (res.errorCode) {
                  case status.NET_ERR: {
                    errorPrompt(res.errorMsg)
                    reject(res)
                    break;
                  }
                  case status.BIZ_ERR: {
                    errorPrompt(res.errorMsg)
                    reject(res)
                    break;
                  }
                  case status.NO_AUTH: {
                    errorPrompt(res.errorMsg)
                    let session = require("storejs")
                    if (isManager(options)) { // 管理端
                      session.remove("managerUserToken")
                      router.push({path: '/manager/login'})
                    } else {
                      session.remove("clientUserToken")
                      router.push({path: '/client/login'})
                    }
                    reject(res)
                    break
                  }
                }
              }
              closeLoading();
              resolve(res);
            }).catch(error => {
              closeLoading();
              errorPrompt('网络连接错误,请检查您的网络')
              console.log('error', error); // for debug
              reject(error);
            });
      });
    }
    
    function commonBizHeader (isManager) {
      let session = require("storejs");
      let params = {}
      params['ua'] = window.navigator.userAgent.toLowerCase()
      params['cv'] = '123456'
      params['ws'] = window.screen.height + '*' + window.screen.width
      params['token'] = "123456"
      params['os'] = window.navigator.appCodeName
      if (isManager) {
        params['token'] = session.get('managerUserToken') // 管理 - 用户令牌
      } else {
        params['token'] = session.get('clientUserToken') // 用户 - 用户令牌
      }
    
      params['app'] = 'kind'
    
      let UUID = session.get('pkey')
      if (!UUID) {
        UUID = getUUID()
        window.localStorage.setItem('pkey', UUID)
      }
      return encodeURIComponent(JSON.stringify(params))
    }
    
    function isManager(options) {
      return options && options.url && options.url.indexOf("/api/worker") != -1
    }
    
    /**
     * 获取UUID
     * @returns {string}
     */
    export function getUUID() {
      let len = 32 // 32长度
      let radix = 16 // 16进制
      let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
      let uuid = []
      let i
      radix = radix || chars.length
      if (len) {
        for (i = 0; i < len; i++) {
          uuid[i] = chars[0 | Math.random() * radix]
        }
      } else {
        var r
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
        uuid[14] = '4'
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | Math.random() * 16
            uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]
          }
        }
      }
      return uuid.join('').toLowerCase()
    }
    

    这是在vue的项目中:在api中调用方法如下(react刚开始学,还在做简单demo)

    import {fetch} from 'api/fetch'
    export const callAuthCode = (userPhone) => {
      return fetch({
        url: '/api/auth/code',
        method: 'post',
        data: ({
          userPhone: userPhone,
        }),
      })
    }

    因为我们这边的后台要求严格区分get/post请求,所以封装的方法调用中必须带有method,如后台已经处理好,全部可进行post请求,则可以参照axios官网里面将方法全部改为.post
    关于fetch方法的说明:主要进行封装了请求拦截,响应拦截,默认请求体由json格式转换form格式,当然,这些都是在axios官网里可以找到的,不过是集合下了而已
    关于请求头部分请不要直接套用,这是我们这边后台要求特殊配置的,后台接口三端共用,必须区分是哪里在调用

    展开全文
  • react使用axios封装请求方法

    千次阅读 2020-06-09 10:07:36
    react项目封装axios请求方法 react确实是一个非常好用的前端框架, 但是其并没有封装发送请求相关的东西, 由于我前期使用vue 中发送请求用的axios, 所以我也在react项目中使用axios, 下面就是我进行简单封装方法: ...

    react项目封装axios请求方法

    react确实是一个非常好用的前端框架, 但是其并没有封装发送请求相关的东西, 由于我前期使用vue 中发送请求用的axios, 所以我也在react项目中使用axios, 下面就是我进行简单封装的方法:

    搭建react项目就不说了, 这种教程太多了

    搭建项目

    npx create-react-app 项目名称
    

    弹出配置

    npm run eject
    

    本地安装axios

    cnpm install axios -S
    

    封装axios

    在src目录下新建request文件夹, 在request文件夹下新建index.js文件, 在index.js中进行封装axios

    1. 导入axios

      import axios from 'axios'
      

      如果请求的的Content-Typeapplication/x-www-form-urlencoded 还需要导入qs, 这个是node下的包, 只要安装了 node就可以直接导入

      import qs from 'qs'
      
    2. 配置请求基础路径 和 context-type

      // axios.defaults.baseURL = 'http://192.168.1.101:8081'; // 设置全局默认基本信息
      axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; // 设置默认的请求头的Content-Type
      

    由于我的项目开发时候, 后端地址值有多个, 所以我就把路径放到一个单独的文件中, 如果地址只有一个, 就直接把上面第一行注释打开, 下面一步也就不需要

    1. 在request目录下新建url.js 用来保存请求的路径, 这个地址根据需求, 可以配置多个

      let baseUrl1 = "192.168.1.5:8080"; //地址1
      let baseUrl2 = "192.168.1.6:8080"; //地址2
      

      还可以配置打包后的环境

      if (process.env.NODE_ENV === "production") {
      	baseUrl1 = baseUrl2 = "你的线上地址"
      }
      

      最后, 导出url

      export default {
      	baseUrl1,
      	baseUrl2
      }
      

      并在index.js中导入

      import url from './url'
      
    2. 进行分装

      get请求

      /**
       * @description 封装的get请求的方法
       * @param {*} url 请求的地址
       * @param {*} data  请求的数据
       * @returns 数据请求的promise对象
       */
      function getRequest(url, data) {
      	return axios.get(url, {
      		params: data
      	})
      }
      

      使用箭头函数的写法:

      const getRequest = (url, data) => axios.get(url, { params: data })
      

      post请求

      /**
       * @description 封装post请求的方法
       * @param {*} url 请求的地址
       * @param {*} data 请求的数据
       * @returns 数据请求的promise对象
       */
      function postRequest(url, data) {
      	return axios.post(url, data)
      }
      

      使用箭头函数的用法

      const postRequest = (url, data) => axios.post(url, data)
      
    3. 配置请求拦截器和响应拦截器

      • 请求拦截器: 需要使用qs转化一下发送的data, 要不后端接收不到数据

        一开始我是这么写的:

        axios.interceptors.request.use(config => {
            config.data = qs.stringify(config.data);
            return config
        })
        

        这样式写发送一般的post请求是没问题的, 但是上传文件就不行啦, 上传的文件不能被转换, 在网上找了一圈找到了答案:

        发送文件用的是 FormData 对象, 发送普通数据用的是普通js对象, 这两个对象调用toString方法生成的字符串是不一样的, 所以最后也就变成了这种写法:

        // 请求拦截器
        axios.interceptors.request.use(config => {
            if (Object.prototype.toString.call(config.data) !== '[object FormData]') {
                config.data = qs.stringify(config.data);
            }
            return config
        })
        
      • 响应拦截器: 由于返回的数据不仅有后端返回的, 还有一些请求的相关信息, 拿到的时候会比较乱, 所以, 需要在响应拦截器中过滤一下. 当然, 也可以进行一些其他的判断操作

        // 响应拦截器
        axios.interceptors.response.use(response => response.data)
        
    4. 导出

      export default {
          ...url,
          postRequest,
          getRequest
      }
      

      我就在这里, 把 url 一起导出了, 用起来的时候方便

    使用

    1. 在普通jsx中使用

      导入:

      import $axios from '../request'
      

      配置url

      const Url1 = $axios.baseUrl1 + '你的地址后缀'    // 拼接地址
      

      使用

      const res = await $axios.postRequest(Url1, param);
      

      param 是要发送的数据, get请求一样

      使用await 要在 外层函数中使用async 修饰一下

      res就是后端返回的数据

    2. 结合 redux或者 dvajs 使用

      import $axios from '../request'
      
      const Url = $axios.baseUrl1 + '你的请求地址'
      
      // 获取验证码
      export const sendData = async (params) => $axios.postRequest(Url, params)
      

      params是要发送的数据

    这个是我经常在项目中用的封装axios方法, 小伙伴们要根据自己的项目来搭配, 适合自己的才是最好的, vue封装方法和这个类似, 有需要的可以给我留言, 我再出一个vue中封装axios教程

    展开全文
  • axios 封装

    2018-12-11 14:28:29
    Vue axios 二次封装 多种请求自适应 ** Fn: axios ** Intro: 公用封装axios 已在main.js中进行 $axios代理 ** Intro: Store.state.permission.constUrl 为公用的接口前缀地址 ** Intro: url 方法接受参数 为...
  • axios封装方式

    2020-09-20 12:33:01
    axios封装
  • Axios封装

    2020-03-09 08:20:06
    Axios封装 封装 network下的request.js import axios from 'axios' export function request(config) { const instance = axios.create({ baseURL:'http://123.207.32.31:8000', timeout: 5000 }); return...
  • 今天小编就为大家分享一篇axios 封装上传文件的请求方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue axios封装以及API统一管理 ,需要的朋友可以参考下
  • axios封装工具类

    2018-06-14 10:51:46
    vue axios封装了get、post、postjson的提交方法。使用的时候引入调用方法
  • create-react-app结合dvajs2-使用axios封装请求方法 接着上一篇 封装请求方法 在src目录下新建request文件夹, 导入axios 并分装请求方法, 不会的可以参考react使用axios封装请求方法 新建services层 在services中...
  • 本文通过实例代码给大家介绍了vue 2.x 中axios 封装的get 和post方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
  • 主要介绍了详解Vue中Axios封装API接口的思路及方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,083
精华内容 11,633
关键字:

axios封装方法