精华内容
下载资源
问答
  • axios封装和使用
    2022-01-23 22:38:03

    首先安装axios

    cnpm install axios --save

    安装成功后新建文件

    引入axios并且配置请求头、超时时间和默认路径

    import axios from 'axios';
    const ConfigBaseURL = 'http://localhost:3300/' //默认路径,这里也可以使用env来判断环境
    
    // axios 配置
    var instance = axios.create({
        headers: {
            'Content-Type': 'application/json;charset=UTF-8',
        },
        timeout: 30000,
        baseURL: ConfigBaseURL, //接口请求地址
    })
    

    然后添加请求拦截器和相应拦截器,请求前的操作和接收到响应的操作都可以写在这里

    
    // 添加请求拦截器
    instance.interceptors.request.use(config => {
        // 在发送请求之前做些什么,比如传token
        return config
    }, error => {
        // 对请求错误做些什么
        console.log(error) // for debug
        return Promise.reject(error);
    })
    
    // 添加响应拦截器
    instance.interceptors.response.use(response => {
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
        //对错误代码做处理
    
    }, error => {
        // 对响应错误做点什么
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登录                
                // 未登录则跳转登录页面,并携带当前页面的路径                
                // 在登录成功后返回当前页面,这一步需要在登录页操作。                
                case 401:
                    console.log("授权失败,请重新登录")
                    break;
                    // 403 token过期                
                    // 登录过期对用户进行提示                
                    // 清除本地token和清空vuex中token对象                
                    // 跳转登录页面                
                case 403:
                    console.log("拒绝访问")
                    break;
                    // 404请求不存在                
                case 404:
                    console.log("请求错误,未找到该资源")
                    break;
                case 500:
                    console.log("服务器端出错")
                    break;
            }
    
        } else {
            console.log("连接服务器失败")
        }
        return Promise.reject(error);
    });
    

    封装post和get的请求方法处理

    // post 请求方法
    export function post(url, data = {}) {
        return new Promise((resolve, reject) => {
            instance.post(url, data).then(response => {
                //对接口错误码做处理
                resolve(response.data);
            }, err => {
                reject(err);
            })
        })
    }
    
    // get 请求方法
    export function get(url, data = {}) {
        return new Promise((resolve, reject) => {
            instance.get(url, {
                    params: data
                })
                .then(response => {
                    resolve(response);
                })
                .catch(err => {
                    reject(err)
                })
        })
    }

    封装所有请求

    export function request(methed, url, data = {}, headers) {
        return new Promise((resolve, reject) => {
            instance({
                    method: methed || 'post',
                    url: url,
                    params: methed === 'get' ? data : '',
                    data: methed !== 'get' ? data : '',
                    headers: headers || { 'Content-Type': 'application/json;charset=UTF-8' },
                })
                .then(response => {
                    //对接口错误码做处理
                    resolve(response.data);
                })
                .catch(err => {
                    reject(err)
                })
        })
    }

    完整文件

    import axios from 'axios';
    const ConfigBaseURL = 'http://localhost:3300/' //默认路径,这里也可以使用env来判断环境
    
    // axios 配置
    var instance = axios.create({
        headers: {
            'Content-Type': 'application/json;charset=UTF-8',
        },
        timeout: 30000,
        baseURL: ConfigBaseURL, //接口请求地址
    })
    
    
    // 添加请求拦截器
    instance.interceptors.request.use(config => {
        // 在发送请求之前做些什么,比如传token
        return config
    }, error => {
        // 对请求错误做些什么
        console.log(error) // for debug
        return Promise.reject(error);
    })
    
    // 添加响应拦截器
    instance.interceptors.response.use(response => {
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
        //对错误代码做处理
    
    }, error => {
        // 对响应错误做点什么
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登录                
                // 未登录则跳转登录页面,并携带当前页面的路径                
                // 在登录成功后返回当前页面,这一步需要在登录页操作。                
                case 401:
                    console.log("授权失败,请重新登录")
                    break;
                    // 403 token过期                
                    // 登录过期对用户进行提示                
                    // 清除本地token和清空vuex中token对象                
                    // 跳转登录页面                
                case 403:
                    console.log("拒绝访问")
                    break;
                    // 404请求不存在                
                case 404:
                    console.log("请求错误,未找到该资源")
                    break;
                case 500:
                    console.log("服务器端出错")
                    break;
            }
    
        } else {
            console.log("连接服务器失败")
        }
        return Promise.reject(error);
    });
    
    export default instance;
    
    /**
     * post 请求方法
     */
    export function post(url, data = {}) {
        return new Promise((resolve, reject) => {
            instance.post(url, data).then(response => {
                //对接口错误码做处理
                resolve(response.data);
            }, err => {
                reject(err);
            })
        })
    }
    
    /**
     * get 请求方法
     */
    export function get(url, data = {}) {
        return new Promise((resolve, reject) => {
            instance.get(url, {
                    params: data
                })
                .then(response => {
                    resolve(response);
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
    
    /**
     * 封装所有请求
     */
    export function request(methed, url, data = {}, headers) {
        return new Promise((resolve, reject) => {
            instance({
                    method: methed || 'post',
                    url: url,
                    params: methed === 'get' ? data : '',
                    data: methed !== 'get' ? data : '',
                    headers: headers || { 'Content-Type': 'application/json;charset=UTF-8' },
                })
                .then(response => {
                    //对接口错误码做处理
                    resolve(response.data);
                })
                .catch(err => {
                    reject(err)
                })
        })
    }

    使用

    import request from './axios'
    export function getLogin(data) {
        return request({
            url: '/login',
            method: 'get',
            data
        })
    }

    更多相关内容
  • 主要介绍了axios封装使用拦截器处理接口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue axios封装 axios 请求

    2020-03-27 15:04:31
    vue axios封装 axios 请求
  • vue项目axios封装和使用

    千次阅读 2022-04-22 21:26:37
    安装axios依赖2.axios封装三、axios请求的使用四、axios请求的验证总结 前言 一、axios简介 Axios 是一个基于 promise 的网络请求库,可以用于浏览器 node.js。 二、axios封装 1.安装axios依赖 npm install ...

    基于vue/cli3.0+脚手架搭建Vue项目(04)



    前言


    一、axios简介

    Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js。

    二、axios封装

    1.安装axios依赖

    npm install axios
    

    2.axios封装

    src目录下新建api文件夹,utils文件夹,request.js文件:
    在这里插入图片描述
    request.js代码:

    import axios from 'axios'
    
    // 创建axios实例
    const HTTP = axios.create({
        baseURL: '/tg_management',
        timeout: 60000
    })
    
    // 请求拦截
    HTTP.interceptors.request.use(config => {
        //设置请求头信息
        let token = localStorage.getItem('token') || ''
        let uuid = localStorage.getItem('uuid') || ''
        const headersOption ={
            token,
            uuid
        }
        config.headers = Object.assign(config.headers, headersOption)
        return config
    }, err => {
        console.log(err);
    })
    
    // 响应拦截
    HTTP.interceptors.response.use(res => {
        return new Promise((resolve, reject) => {
            if(res.status ===200) {
                // 可以继续细分接口返回res.data.status/res.data.code状态码的判断
                resolve(res.data);
            }else {
                reject(res)
            }
        });
    },err => {
        console.log(err);
    })
    
    export default HTTP
    

    三、axios请求的使用

    1:在api文件夹下,新建demo文件夹(demo模块),index.js文件
    在这里插入图片描述
    index.js代码:

    import request from '@/api/utils/request'
    
    const demo ={
        login(params){
            return request.post('/user?method=login', params)
        }
    }
    export default demo
    

    2:utils文件夹下,新建index.js文件:
    在这里插入图片描述
    index.js代码:

    import demo from '../demo'
    const api ={
        demo
    }
    export default api
    

    3:在main.js增加api文件的引入:
    在这里插入图片描述

    import api from "./api/utils"
    
    Vue.prototype.$api =api
    

    4:vue.config.js文件添加devServer,解决请求的跨域问题
    在这里插入图片描述

    devServer: {
        proxy: {
          '^/tg_management': {
            target: 'http://47.106.123.118:8080/tg_management',
            secure: false,
            changeOrigin: true,
            pathRewrite:{
              '^/tg_management':''
            }
          }
        }
      }
    

    四、axios请求的验证

    在这里插入图片描述

    let params ={
          username: 123,
          password: 123,
          remember: false,
        }
        this.$api.demo.login(params).then(()=>{})
    

    接口有效,欢迎验证

    总结

    有些人浅薄,有些人金玉其外而败絮其中。可不经意间,有一天你会遇到一个彩虹般绚丽的人,从此以后,其他人就不过是匆匆浮云。–《怦然心动》

    展开全文
  • 主要介绍了vue中axios使用封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue axios 封装使用

    千次阅读 2020-06-07 21:21:45
    在vue项目中,后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端node.js中。他有很多优秀的特性,例如拦截请求响应、取消请求、转换json、客户端防御XSRF等。 1、...

    axios 封装

              在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。

    1、首先创建 vue 项目,安装 axios

    vue create demo
    cd demo
    npm i axios vue-axios -S

              一般我会在项目的src目录中,新建一个 network 文件夹,然后在里面新建一个 manager.js、 request.js、requestMethods.js、api.js。
              manager.js 文件用来封装我们的axios,request.js 文件用来定义的组件内调用的方法,requestMethods.js用来导出配置好的axios实例,api.js用来统一管理我们的接口。

    2、manager.js

    import axios from "axios"
    import { Message} from 'element-ui'
    
    // 调用axios.create方法,配置一些属性,返回一个新的axios
    const request= axios.create({
        baseURL: "http://localhost:8080/",
        //请求超时时间
        timeout: 2000
    })
    
    // 请求拦截
    request.interceptors.request.use(
    	//config 代表是你请求的一些信息
        config => {
            // 在请求发送之前的操作
            return config
        },
        error => {
            // 对错误请求的处理
            // 弹出错误请求消息
            Message({
                showClose: true,
                message: error.message,
                type: "error"
            })
            return Promise.reject(error)
        }
    )
    
    //  response拦截器 响应拦截器 请求之后的操作
    request.interceptors.response.use(
        config => {
            return config
        },
        error => {
            return Promise.reject(error)
        }
    )
    
    export default request;
    

    3、requestMethods.js

    // 导出请求方式
    export const GET = "get"
    export const POST = "post"
    export const POT = "pot"
    export const DELETE = "delete"
    

    4、api.js

    // 
    const path = {
        data:"data.json",
    }
    export default path
    

    5、request.js

    import fetch from "./manager"
    import path from "./api"
    import {GET} from "./requestMethods"
    
    export function getShopList(params){
        return fetch({
            url:path.data,
            method:GET,
            params:params
        })
    }
    

    6、在vue组件中使用

    // script 标签内
    import { getShopList} from "../network/request";
    export default {
      created() {
        getShopList()
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          });
      }
    };
    
    展开全文
  • axios封装使用拦截器统一处理接口,超详细的教程(推荐).docx
  • vue 2.x axios 封装的get post方法 import axios from 'axios' import qs from 'qs' export class HttpService { Get(url, data) { return new Promise((resolve, reject) => { axios.get(url, { params: ...
  • 前言 使用axios可以统一做请求响应拦截,例如请求响应时...1.首先导入axios和router。 import axios from 'axios'; import router from '../router'; 2.接着设置axios请求参数。 axios.defaults.timeout = 5000; //请
  • 今天小编就为大家分享一篇axios 封装上传文件的请求方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 封装axios 在vue中常用的请求方式就是axios,下面讲解axios封装方式 第一步,需要引入axios import axios from 'axios'//引入axios import router from '../router/index'//引入路由 第二步,定义新的axios let ...
  • axios 封装

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

    在之前我们讲过axios的基本使用方法【axios】axios的基本使用,在实际的Vue项目中,我们并不使用这种方法。当时还未实现项目的规范化,没有严格划分组件和模块,只是把所有东西都写在一个html文件中,现在我们要从前端工程化的角度来看如何使用axios。

    零、准备工作

    假设我们有一个Vue项目,App根组件中包含一个Left组件和一个Right组件,Left组件中有一个按钮,点击后发送GET请求。Right组件中有一个按钮,点击后发送POST请求。基本页面构成如下:
    在这里插入图片描述

    首先需要安装axios包,后续才可以在项目中使用axios。在终端执行npm i axios -S,即可把axios安装到项目中。

    一、在需要发送请求的.vue组件中导入axios并使用

    Left组件的script标签内容:

    <script>
    // 导入axios模块
    import axios from 'axios'
    
    export default {
      data() {
        return {
          bookList: {}
        }
      },
      methods: {
      	// 点击事件
      	// <button @click="getInfo">发送GET请求</button>
        async getInfo() {
          const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks')
          console.log(res)
          // 一般把请求回来的数据转存到data中
          this.bookList = res
        }
      }
    }
    </script>
    

    Right组件的script标签内容:

    <script>
    // 导入axios模块
    import axios from 'axios'
    
    export default {
      methods: {
      	// 点击事件
      	// <button @click="postInfo">发送POST请求</button>
        async postInfo() {
          const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', age: 20 })
          console.log(res)
          // 不再演示数据转存到data的过程
        }
      }
    }
    </script>
    

    在这里插入图片描述
    均可以成功请求,但是这种方法的缺点是:每使用一次axios,就要导入一次,只要这个.vue组件使用了axios,就需要导入axios模块,各组件之间不能互相使用(不通用),比较麻烦。因此我们希望axios全局可用

    二、把axios挂载到Vue原型上并配置请求根路径

    (1) 因为我们希望axios 全局可用,所以需要在 main.js文件中进行相应配置,步骤如下:

    1. 导入 axios 模块
    2. 将 axios 挂载到 Vue 原型上。
    import Vue from 'vue'
    import App from './App.vue'
    
    // 1.导入axios模块
    import axios from 'axios'
    
    Vue.config.productionTip = false
    
    // 2.将axios挂载到Vue原型上
    Vue.prototype.$http = axios
    
    new Vue({
      render: h => h(App)
    }).$mount('#app')
    

    【注意】将axios挂载到Vue原型上时,其中$http的名字是任意的,表示我们在Vue原型上挂载了一个名为$http的属性(方法),它的值为axios。习惯上,我们都把这个属性命名为$http

    (2) 为了简化.vue组件实例的调用,可以配置一个请求根路径,之后使用时只需要传入根路径之后的部分即可。

    import Vue from 'vue'
    import App from './App.vue'
    
    // 1.导入axios模块
    import axios from 'axios'
    
    Vue.config.productionTip = false
    
    // 3.配置请求根路径
    axios.defaults.baseURL = 'http://www.liulongbin.top:3006'
    // 2.将axios挂载到Vue原型上
    Vue.prototype.$http = axios
    
    new Vue({
      render: h => h(App)
    }).$mount('#app')
    

    (3)在组件中的使用方法:

    1. 不再需要导入axios模块,直接删除导入代码
    2. 每一个.vue组件都可以看成是一个Vue实例,因为Vue原型上挂载了一个名为$http的属性,而.vue组件又是一个Vue实例,所以可以通过this.$http拿到axios,然后就可以正常使用了。
    3. 由于配置了请求根路径,所以GET/POST请求的第一个参数,直接传入根路径之后的部分即可。

    Left组件的script标签内容:

    <script>
    // 不再需要导入axios模块,直接删除导入代码
    export default {
      data() {
        return {
          bookList: {}
        }
      },
      methods: {
        async getInfo() {
          const { data: res } = await this.$http.get('/api/getbooks')
          console.log(res)
          // 一般把请求回来的数据转存到data中
          this.bookList = res
        }
      }
    }
    </script>
    

    Right组件的script标签内容:

    <script>
    export default {
      methods: {
        async postInfo() {
          const { data: res } = await this.$http.post('/api/post', { name: 'zs', age: 20 })
          console.log(res)
          // 不再演示数据转存到data的过程
        }
      }
    }
    </script>
    

    【缺点】:请求数据的代码复用性差,如果不同的组件需要请求同一份数据,每请求一次,就要写一次请求函数。

    三、封装一个拿到axios的模块,并封装请求数据的API

    1.封装axios模块

    在和src目录同级的地方,新建一个utils文件夹,表示用到的工具,在里面新建一个request.js文件,这个就是封装axios的模块。谁需要用到这个根路径去请求数据,谁就导入这个模块。

    request.js文件的内容:

    // 导入axios
    import axios from 'axios'
    
    // 通过axios.create方法创建一个axios实例,用request接收
    const request = axios.create({
      // 指定请求的根路径
      baseURL: 'http://www.liulongbin.top:3006'
    })
    
    export default request
    

    使用方法(以Left组件为例):

    <script>
    // 导入request模块
    import request from '@/utils/request.js'
    
    export default {
      data() {
        return {
          bookList: {}
        }
      },
      methods: {
        async getInfo() {
          // 假设需要传一个参数,这里的参数是假的,演示用
          const { data: res } = await request.get('/api/getbooks', {
            params: { id: 1 }
          })
          console.log(res)
          // 一般把请求回来的数据转存到data中
          this.bookList = res
        }
      }
    }
    </script>
    

    【拓展】一个项目中可以封装多个axios模块,如果需要用到多个不同的请求根路径,那么每一个根路径封装一个对应的axios模块,然后各模块之间互不相同,互不影响。

    但是这个时候还是没有解决代码复用性低的问题,请求函数会重复写。此时我们再把请求数据的代码封装成一个API模块

    2.封装API模块

    在和src目录同级的地方,新建一个api文件夹,表示自己写的api,在里面新建一个bookAPI.js文件,这个就是封装的books的模块,关于book的所有API接口,都可以封装到这个模块。谁需要用到这个API接口,谁就导入这个模块。

    bookAPI.js文件的内容:

    // 导入request模块
    import request from '@/utils/request.js'
    
    // 向外按需导出一个接口函数
    export const getBookListAPI = function() {
      // 记得一定要把请求到的promise对象return出去
      return request.get('/api/getbooks', {
        // 假设需要传一个参数,这里的参数是假的,演示用
        params: { id: 1 }
      })
    }
    
    <script>
    // 按需导入bookAPI
    import { getBookListAPI } from '@/api/bookAPI.js'
    
    export default {
      data() {
        return {
          bookList: {}
        }
      },
      methods: {
        async getInfo() {
          // 调用getBookListAPI请求数据
          const { data: res } = await getBookListAPI()
          console.log(res)
          // 一般把请求回来的数据转存到data中
          this.bookList = res
        }
      }
    }
    </script>
    

    这就实现了请求数据接口的封装,提高了代码的复用性。

    展开全文
  • vue-x-axios封装vuex与axios,任何vue项目可以直接复用,实现axios统一调用,单通道修改vuex
  • 虽然vue中axios使用已经十分方便,但是实际我们的日常操作中可能为了接口的规则一致,来创建一个统一管理的全局方法达到简化操作.而且在实际接口对接中,我们大多都需要对请求响应进行拦截来进行token以及回调状态...
  • axios封装使用 首先,新建一个vue项目 1.安装 axios npm install axios; 安装完成后,可以在项目的src路径下的 package.json 文件中看到axios及版本号 2.引入axios 在src路径下新建文件api文件夹,里面存放api...
  • Vue封装axios使用

    2022-01-07 13:20:39
    vue使用axios最简单最实用的封装技巧
  • 主要介绍了Vue前端对axios封装和使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • axios使用封装

    千次阅读 2021-08-30 17:00:07
    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器 node.js 中。 特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求响应 转换请求数据响应数据 取消请求 自动...
  • 主要介绍了详解Vue中Axios封装API接口的思路及方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • axios封装工具类

    2018-06-14 10:51:46
    vue axios封装了get、post、postjson的提交方法。使用的时候引入调用方法。
  • 在vue项目中,每次后台交互的时候,经常用到的就是axios请求数据,它是基于promise的http库,可运行在浏览器端node.js中。当项目越来越大的时候,接口的请求也会越来越多,怎么去管理这些接口?多人合作怎么处理?...
  • 主要介绍了Vue Promise的axios请求封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • axios请求的封装

    2019-12-15 15:59:38
    axios请求的封装,在工程的src目录下面,新建一个文件夹lib,将该文件复制到lib文件夹下,并在main.js中设置为全局引用,例:在main.js中添加:import Extend from './lib/http',Extend(Vue.prototype),另外...
  • axios封装、配置及使用

    千次阅读 多人点赞 2020-06-17 11:53:07
    背景:一个vue项目中需要使用axios进行数据...二、axios封装:项目中创建一个js文件如:axios.js,在axios.js文件中进行axios的封装 //1、引入axios import axios from 'axios' //2、创建axios的实例 let httpService.
  • npm install axios 其次 在src目录下新建一个utils文件夹,我们的一些封装工具都可以放在这。 然后在utils文件夹下新建一个request.js文件,将aixos请求的封装写到里面: import axios from 'axios' import Qs from...
  • es6 的promise 逐步解决了层层回调的问题,es8的async await让异步变成了同步的写法,在vue中,可以通过封装axios,使得所有的请求都可以使用同步写法,同时处理错误信息等,可以建一个api.js文件,全局创建api实例. ...
  • axios使用封装

    千次阅读 2020-12-27 22:00:07
    axios跨域及封装 1、安装 npm install axios --save 2、main.js引用 import axios from 'axios'; 3、axios基本用法 function get(){ //axios.get('http://localhost:3000/post?id=1') axios({ url:'/posts', ...
  • vue3:axios封装使用

    千次阅读 2022-03-16 14:39:33
    2、封装axios.js //router import router from "../router/index.js"; //引入路由对象 import { Toast } from 'vant'; // 提示框 // axios import axios from 'axios' import qs from "qs"; import { baseURL } ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,231
精华内容 15,292
关键字:

axios封装和使用