精华内容
下载资源
问答
  • axios二次封装

    2020-11-26 11:39:50
    axios 二次封装 //单独封装一个js import axios from "axios"; import store from "../store/index" axios.defaults.baseURL="https://www.liulongbin.top:8888/api/private/v1"; // 请求头 axios.interceptors....

    axios 二次封装

    //单独封装一个js
    import axios from "axios";
    import store from "../store/index"
    axios.defaults.baseURL="https://www.liulongbin.top:8888/api/private/v1";
    // 请求头
    axios.interceptors.request.use(config =>{
    //    store.state.loading=true
        config.headers.Authorization =sessionStorage.getItem("token");
    
        return config
    })
    // 响应
    axios.interceptors.response.use(config =>{
        store.commit('loading', false)
        return config
    })
    
    let Request=(params)=>{
        return new Promise((resolve, reject)=>{
            axios({
                ...params,
            }).then(res=>{
                resolve(res);
            }).catch(err=>{
                reject(err);
            })
        })
    }
    
    export {Request}

    在调用接口的时候引入

    import {Request} from '../util/request'
    
    export const login = (data)=>Request({
        url: '/login',
        method:'post',
        params: data
    })
    export const menus=()=>Request({
        url:'/menus',
        method:'get',
        // params,
    })
    // 用户列表获取
    export const users=(data)=>Request({
        url:'/user',
        method:'get',
        params: data
    })

     

    展开全文
  • Axios 二次封装

    2021-03-13 09:50:39
    Axios二次封装 /* * 对Axios的二次封装,目的:把当前项目中,所有请求的公共部分进行统一处理 * + axios.defaults 设置公共的配置项 * + axios.interceptors 基于拦截器做统一处理 */ // 配置请求接口的统一前缀...

    Axios 二次封装

    目的:把当前项目中,所有请求的公共部分进行统一处理

    • axios.defaults 设置公共的配置项
    • axios.interceptors 基于拦截器做统一处理

    配置请求接口的统一前缀

    • 开发 development
    • 测试 test
    • 灰度 grayscale
    • 生成 production
    import axios from 'axios'
    import Qs from 'qs'
    import router from '@/router'
    import { Message } from 'element-ui'
    import Cookies from 'js-cookie'
    
    axios.defaults.baseURL =
      process.env.NODE_ENV === 'development' ? '' : 'http://127.0.0.1:9999'
    axios.defaults.withCredentials = true // 设置跨域请求中是否携带资源凭证
    axios.defaults.timeout = 1000
    axios.defaults.headers.post['Content-Type'] =
      'application/x-www-form-urlencoded;charset=UTF-8' // 配置公共的自定义请求头信息
    
    // POST系列请求对于请求主体信息的统一格式化
    axios.defaults.transformRequest = function (data, headers) {
      if (data === null || typeof data !== 'object') return data
      let contentType = headers['Content-Type'] || headers.post['Content-Type']
      if (contentType.includes('urlencoded')) return Qs.stringify(data)
      if (contentType.includes('json')) return JSON.stringify(data)
      return data
    }
    // 设置响应状态码的校验处理{状态码哪些是算请求成功,哪些算失败}
    axios.defaults.validateStatus = function (status) {
      return status >= 200 && status < 400
    }
    
    // 请求拦截器,在向服务器发送请求之前,拦截到现有的配置,再去做一些统一修改
    axios.interceptors.request.use(
      config => {
        // 是否需要设置 token
        const token = Cookies.get('token')
        if (token) {
          config.headers['Authorization'] = token
        }
        return config
      },
      error => {
        console.log(error) // for debug
        return Promise.reject(error)
      }
    )
    
    // 响应拦截器,当前请求有结果之后,做一些成功或者失败的统一提示处理等...
    axios.interceptors.response.use(
      response => {
        // 服务器正常返回结果 & validateStatus状态码校验成功
        return response.data
      },
      error => {
        // 取消请求也会在这里拦截到
        if (error.message === '取消请求') return Promise.resolve('取消请求')
        /*
        失败情况:
        1.服务器返回了结果但是状态码没有经过validateStatus校验
        2.服务器压根没有返回任何的结果
        3.请求中断或者超时
        */
        let response = error.response
        if (response) {
          // @1
          switch (response.status) {
            case 401:
              router.push({ path: '/login' })
              break
            case 500:
              router.push({ path: '/login' })
              break
            // ...
          }
          Message({
            message: '访问失败,请联系系统管理员',
            type: 'warning',
            duration: 3 * 1000,
          })
        } else {
          if (error && error.code === 'ECONNABORTED') {
            Message({
              message: '服务器拒绝了您的请求',
              type: 'warning',
              duration: 3 * 1000,
            })
          }
          if (!navigator.onLine) {
            Message({
              message: '设备已离线',
              type: 'warning',
              duration: 3 * 1000,
            })
          }
        }
        return Promise.reject(error)
      }
    )
    
    export default axios
    
    展开全文
  • axios二次 封装

    2019-08-20 14:16:42
    下载axios 下载mint-ui axios.js代码如下 import axios from "axios"; //引入axios // 引入提示组件以及加载中的组件 import { Toast,Indicator } from "mint-ui"; //配置全局的路由 axios.defaults.baseURL ...

    前提准备

    下载axios   下载mint-ui

     

    axios.js代码如下

    import axios from "axios"; //引入axios
    // 引入提示组件以及加载中的组件
    import {
      Toast,Indicator
    } from "mint-ui";
    
    //配置全局的路由
    axios.defaults.baseURL = process.env.API_URL;   //本地调试的时候用测试服    打包之后是正式服
    
    
    //封装请求   options表示请求的参数  islogin表示的是是否显示加载中的,值为1的时候显示加载中  否则不显示
    export function fetch(options, islogin) {
      if (islogin == 1) {
        Indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle"
        });
      }
    
      // Promise封装axios
      return new Promise((resolve, reject) => {
        //创建一个axios实例
        const axios1 = axios.create({
          "timeout": 30000, // 请求超时时间  
          headers: {        // 请求头  
            "Content-Type": "application/json;charset=UTF-8"
          }
        });
    
        axios1(options)
          // 请求成功之后的操作
          .then(response => {
            //then 请求成功之后进行什么操作  根据实际的需求来
            if (response.data.code == 100) {    //code等于100表示请求正确  把请求到的数据发到引用请求的地方
              resolve(response.data); 
              Indicator.close();
            } else {                            //否则打印后台的错误信息
              Indicator.close();
              Toast({
                message: response.data.extend.msg,
                position: "middle",
                duration: 3000
              });
            }
    
          })
          // 请求失败之后显示请求异常
          .catch(error => {
            reject(error);
            Indicator.close();
            Toast({
              message: "请求异常",
              position: "middle",
              duration: 3000
            });
          });
      });
    }
    

     

    使用时

    //引入封装的axios文件
    import {
      fetch
    } from "./axios.js"
    
    
    特殊请求如下,如果后台需要你发送一个json数据的时候
    
    fetch({
        method: "post",
        url: "/apiapi",
        data: JSON.stringify({ ...里面是请求的参数}),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(function(res){})
    
    
    普通请求如下
    
    fetch({
        method: "get",
        url: "/apiapi",
        params: {
        ...里面是请求的参数
        }
      }).then(function(res){})

     

    展开全文
  • axios 二次封装

    2021-09-19 10:45:46
    **在 src 下面创建 utils 目录 里面创建一个 request.js 用与封装axios 先引入axios ** import axios from 'axios' 接下里封装 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url =...

    认定了 就要好好的珍惜对待,人生不容辜负,你必须要更加努力 。加油 骚年。

    **在 src 下面创建 utils 目录 里面创建一个 request.js 用与封装axios

    先引入axios **
     import axios from 'axios'
     接下里封装
     const BASTURL=  process.env.VUE_APP_BASE_API==='production'? '':'/api';
    const service = axios.create({
        baseURL: BASTURL, // url = base url + request url
        withCredentials: true, // send cookies when cross-domain requests
        timeout: 10000 // request timeout
    })
    //对上面的参数进行说明 
    
    //   process.env.VUE_APP_BASE_API==='production'? '':'/api'  是判断当前的环境 如果是生产环境 看具体的请求 做不做处理 如果不是 那么后面的 /api  是为了跨域的 不需要可以不写 后面的 vue.config.js跨域会讲到 
    // 在根目录的创建的 .env.development 文件,VUE_APP_BASE_API   是名称 ,process.env.VUE_APP_BASE_API 是获取开发环境的前缀地址 下面会讲解到
    //再在根目录的创建一个 .env.production 文件,VUE_APP_BASE_API   是名称 ,process.env.VUE_APP_BASE_API 是获取生产环境的前缀地址 下面会讲解到
    //  withCredentials: true, 是请求携带cookie 不写 不会携带
    // timeout: 10000   是请求时长10秒  
    
    
    
    //下面接着 添加请求头  具体看后端需要什么样的请求头 修改  Content-Type 就行
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    
    // 接下来就是  请求拦截器  
    service.interceptors.request.use(
        config => {
            // const token = getToken()
    
          if(token){
    				//把token 加到请求头里面去 具体问后端加到哪个变量中,这里是 随便加一个
    				config.headers.post['X-Access-Token'] = token		
       		}
    
            return config
        },
        error => {
            return Promise.reject(error)
        }
    )
    
    
    // 接下来响应拦截器
    
    service.interceptors.response.use(
        response => {
            const res = response.data
    
          
            if (res.code != '200') {
        	  //  问后台的一般返回的状态码 有哪几个 自己做拦截 如比下面的登陆过期等等的
                 if (res.code === '50008' || res.code === '50012' || res.code === '50014') {
                    // 登录过期 提示用户 并且跳转到登录页
                }
                return Promise.reject(new Error(res.message || 'Error'))
            } else {
                return res
            }
        },
        error => {
            return Promise.reject(error)
        }
    )
    
    //  最后再导出 
    export default service
    
    // 这里 axios 就封装完了
    

    上面说道 process.env.VUE_APP_BASE_AP 直接再根目录创建 .env.development 里面 直接这样写

    VUE_APP_BASE_API = '后台地址'
    

    .env.production 文件 是一样·的 ,

    最后一步 再src目录下 创建 api.js

    // 第一步 引入 上面封装的axios  
    import service '@/utils/request' 
     //  接下来就是请求 比如 登录接口的请求 这样写 
      
     export function login(data) {
        return request({
            url: '/hfy/login',
            method: 'post',
            data
        })
    }
     
     // 再页面中 直接引入这个api
    import {login} from "@/api/api";
    
    // 请求调用 直接  
    
    login(登录传的参数).then((res) => {
         
    });
    

    至此 axios 封装全部完成

    这里补充一点 如果 如果请求出现跨域,后台没有解决,那么就需要我们前端来干了

    // 在根目录创建 vue.config.js  目录  写下面的代码
    module.exports = {
    	devServer: {
    		host: '192.168.0.104',
            port: 8081,
            autoOpenBrowser: false,
            errorOverlay: true,
            notifyOnErrors: true,
            poll: false,
            useEslint: true,
            showEslintErrorsInOverlay: false,
            devtool: 'eval-source-map',
            cacheBusting: true,
            cssSourceMap: false,
       		 proxy: {  //配置跨域
          		'/api': {
           			 target: 'http://121.121.67.254:8185/',  //这里后台的地址模拟的;应该填写你们真实的后台接口
           			 changOrigin: true,  //允许跨域
           			 pathRewrite: {
             		 /* 重写路径,当我们在浏览器中看到请求的地址为 http://localhost:8080/api/core/getData/userInfo 时
               		 实际上访问的地址是:http://121.121.67.254:8185/core/getData/userInfo,因为重		写了/api*/
             	 	'^/api': '' 
           			 }
         		 },
       		 }
    	  },
    }
    
    

    如有不足之处请指出来 或联系邮箱 yuyong1663519276@163.com 谢谢

    展开全文
  • Axios二次封装

    2019-08-19 20:47:09
    axios是一个基于Promise的http库,可以用在浏览器和node.js中。同时也是对原生浏览器请求XMLHttpRequest的封装,支持Promise的APi请求,避免了回掉...可以开箱即用,但是在实际项目时,需要对axios进行二次封装 实...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,234
精华内容 2,893
关键字:

axios二次封装