精华内容
下载资源
问答
  • 直接上源码: <!DOCTYPE html> <... ...mock拦截axios请求</title> </head> <body> <!-- 本地npm安装mock和axios --> <!-- <script src="../node_modules//mockjs...

     

    直接上源码:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>mock拦截axios请求</title>
    </head>
    
    <body>
    
        <!-- 本地npm安装mock和axios -->
        <!-- <script src="../node_modules//mockjs//dist//mock.js"></script> -->
        <!-- <script src="../node_modules/axios//dist/axios.js"></script> -->
    
        <!-- 官方在线引入地址(推荐使用本地) -->
        <script src="http://mockjs.com/dist/mock.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
        <script>
            /*************** axios拦截配置 ***************************************************/
            /**
             * 请求拦截
             */
            axios.interceptors.request.use(config => {
                console.log(config);
    
                //可以通过该参数修改请求的地址  ,config 还有很多参数可以设置如,请求超时时间等等
                //config.url = 'data2.json' 
    
                // 从本地存储中获取token,当然这里也可以从cookie中获取token
                let token = localStorage.getItem('token');
                if (token) {
                    // 设置请求头中token的参数
                    config.headers.common['token'] = localStorage.getItem('token');
                }
    
                return config;
            });
    
            /**
             * 响应拦截
             */
            axios.interceptors.response.use(response => {
                return response;
            });
            /********************************************************************************/
    
    
            /*************** mock模拟数据 ****************************************************/
            // mock数据拦截http://121.36.146.10:8084/industry请求 模拟响应数据
            Mock.mock('http://121.36.146.10:8084/industry', {
                'data': [{
                    id: 1,
                    iId: 0,
                    industryName: "互联网/IT/电子/通信"
                }, {
                    id: 2,
                    iId: 0,
                    industryName: "房地产"
                }, {
                    id: 3,
                    iId: 0,
                    industryName: "金融业"
                }, {
                    id: 4,
                    iId: 0,
                    industryName: "建筑业"
                }],
                'msg': "ok",
                'status': 200
            });
            /********************************************************************************/
    
    
            //设置全局的baseURL
            axios.defaults.baseURL = 'http://121.36.146.10:8084/'
    
            axios.get('industry').then(res => {
                console.log(res.data) // 直接打印res可以显示很多数据 如响应头信息等等
            });
        </script>
    </body>
    
    </html>

     

     

     

     

     

     

     

    展开全文
  • src根目录下创建config/axios.js 1.引入axios,vue,router import axios from 'axios' import router from '../router' import Vue from 'vue'; 2.创建实例 使用自定义配置创建axios的新实例 const axios...

    src根目录下创建config/axios.js

    1.引入axios,vue,router

    import axios from 'axios'
    import router from '../router'
    import Vue from 'vue';

    2.创建实例

    使用自定义配置创建axios的新实例

    const axiosInstance = axios.create({
        baseURL: 'http://schj/user/api',
        responseType: 'json',
        timeout: 50000,
    });

    3.封装axios请求

    export function fetch(url, params,type) {
        return new Promise((resolve, reject) => {
            axiosInstance({
              method: 'post',
              url,
              data:params,
              responseType: type?'blob':'json',
          }).then(res => {
             resolve(res)
          }).catch(err => {
             reject(err)
          })
        })
    }

    4.使用封装的方法进行请求

    import { fetch } from '../config/axios'
    
    export function listOrder (params){
      return fetch('/schj/orders/list',params)
    }

    在需要请求的模块中引入 listOrder

    import { listOrder } from '../../api/system'
    
    listOrder(data).then(res => {
                    
    }).catch(err => {
               
    });

     

    展开全文
  • axios请求本地json

    千次阅读 2019-05-22 15:30:24
    axios请求本地json,相关依赖安装 1:npm安装 npm install axios --save 2.在main.js下引用axios import axios from 'axios' 一切环境依赖搭建好之后,下面来写个例子:axios请求本地json 1:在static文件夹底下...

    axios请求本地json,相关依赖安装

    1:npm安装

       npm install axios --save
    

    2.在main.js下引用axios

      import axios from 'axios'
    

    一切环境依赖搭建好之后,下面来写个例子:axios请求本地json

    1:在static文件夹底下新建json文件,( 本地JSON文件一定要需放在static文件夹之下。)

    访问服务器文件,应该把 json文件放在最外层的static文件夹,这个文件夹是vue-cli内置服务器向外暴露的静态文件夹。

    2:data.json数据格式如下:

    {
        "first":[
            {"name":"王小婷","nick":"祈澈菇凉"},
            {"name":"安安","nick":"坏兔子"},
            {"name":"编程微刊","nick":"简书"}
    
        ]
    }
    

    3:写一个axios

    getData() {
                    axios.get('../../static/data.json').then(response => {
                        console.log(response.data);
                    }, response => {
                        console.log("error");
                    });
                }
    

    4:整体代码如下:

    <template>
        <div id="app">
        </div>
    </template>
    <script>
        import axios from "axios";
        export default {
            name: "app",
            data() {
                return {
                    itemList: []
                }
            },
            mounted() {
                this.getData();
            },
            methods: {
                getData() {
                    axios.get('../../static/data.json').then(response => {
                        console.log(response.data);
                    }, response => {
                        console.log("error");
                    });
                }
            }
        }
    </script>
    
    

    5:前台显示:


    原文作者:祈澈姑娘 关注「编程微刊」公众号 ,在微信后台回复「小程序」,获取小程序开发全套资料和500G编程资源教程。

    展开全文
  • Vuejs通过Axios请求数据

    万次阅读 2018-10-28 20:33:22
    Vuejs通过Axios请求数据 我们来搭建api接口调用工具Axios。Vue本身是不支持ajax调用的,如果你需要这些功能就需要安装对应的工具。 支持ajax请求的工具很多,像superagent和axios。今天我们用的就是axios,因为听说...

    Vuejs通过Axios请求数据

    我们来搭建api接口调用工具Axios。Vue本身是不支持ajax调用的,如果你需要这些功能就需要安装对应的工具。

    支持ajax请求的工具很多,像superagent和axios。今天我们用的就是axios,因为听说最近网上大部分的教程书籍都使用的是axios,本身axios这个工具就已经做了很好的优化和封装,但是在使用时,还是比较繁琐,所以我们来重新封装一下。

    安装Axios工具

    `cnpm install axios -D`
    

    img

    在安装的时候,一定要切换进入咱们的项目根目录,再运行安装命令,然后如提示以上信息,则表示安装完成。

    封装Axios工具
    编辑src/api/index.js文件(我们在上一章整理目录结构时,在src/api/目录新建了一个空的index.js文件),现在我们为该文件填写内容。

    // 配置API接口地址
    var root = 'https://cnodejs.org/api/v1'
    // 引用axios
    var axios = require('axios')
    // 自定义判断元素类型JS
    function toType (obj) {
        return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
    }
    // 参数过滤函数
    function filterNull (o) {
        for (var key in o) {
            if (o[key] === null) {
                delete o[key]
            }
            if (toType(o[key]) === 'string') {
                o[key] = o[key].trim()
            } else if (toType(o[key]) === 'object') {
                o[key] = filterNull(o[key])
            } else if (toType(o[key]) === 'array') {
                o[key] = filterNull(o[key])
            }
        }
        return o
    }
     
    /*
      接口处理函数
      这个函数每个项目都是不一样的,我现在调整的是适用于
      https://cnodejs.org/api/v1 的接口,如果是其他接口
      需要根据接口的参数进行调整。参考说明文档地址:
      https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
      主要是,不同的接口的成功标识和失败提示是不一致的。
      另外,不同的项目的处理方法也是不一致的,这里出错就是简单的alert
    */
    function apiAxios (method, url, params, success, failure) {
        if (params) {
            params = filterNull(params)
        }
        axios({
            method: method,
            url: url,
            data: method === 'POST' || method === 'PUT' ? params : null,
            params: method === 'GET' || method === 'DELETE' ? params : null,
            baseURL: root,
            withCredentials: false
        })
        .then(function (res) {
        if (res.data.success === true) {
            if (success) {
                success(res.data)
            }
        } else {
            if (failure) {
                failure(res.data)
            } else {
                window.alert('error: ' + JSON.stringify(res.data))
            }
        }
        })
        .catch(function (err) {
            let res = err.response
            if (err) {
                window.alert('api error, HTTP CODE: ' + res.status)
            }
        })
    }
     
    // 返回在vue模板中的调用接口
    export default {
        get: function (url, params, success, failure) {
            return apiAxios('GET', url, params, success, failure)
        },
        post: function (url, params, success, failure) {
            return apiAxios('POST', url, params, success, failure)
        },
        put: function (url, params, success, failure) {
            return apiAxios('PUT', url, params, success, failure)
        },
        delete: function (url, params, success, failure) {
            return apiAxios('DELETE', url, params, success, failure)
        }
    }
    

    更多关于AxIos的解释请参见:https://github.com/mzabriskie/axios

    配置Axios工具
    我们在使用之前,需要在src/main.js中进行简单的配置,先来看一下原始的main.js文件

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
     
    Vue.config.productionTip = false
     
    /* eslint-disable no-new */
        new Vue({
        el: '#app',
        router,
        template: '<App/>',
        components: { App }
    })
    

    修改为:

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
     
    // 引用API文件
    import api from './api/index.js'
    // 将API方法绑定到全局
    Vue.prototype.$api = api
     
    Vue.config.productionTip = false
     
    /* eslint-disable no-new */
    new Vue({
        el: '#app',
        router,
        template: '<App/>',
        components: { App }
    })
    

    通过以上的配置,我们就可以在项目中使用axios工具了,接下来我们来测试一下这个工具。

    使用Axios工具
    我们来修改一下 src/page/Index.vue 文件,将代码调整为以下代码:

    <template>
        <div>index page</div>
    </template>
    <script>
    export default {
        created () {
            this.$api.get('topics', null, r => {
                console.log(r)
            })
        }
    }
    </script>
    

    我们在Index.vue中向浏览器的控制台输入一些接口请求到的数据,如果你和我也一样,那说明我们的接口配置完成正确。如下图:

    img

    如果你是按我的操作一步一步来,那最终结果应该和我一样。如果出错请仔细检查代码

    转载自:https://www.cnblogs.com/xinhudong/p/7865004.html

    展开全文
  • axios请求的实现

    千次阅读 2019-10-11 17:03:12
    1. 开启服务器 2. axios请求的实现(get) 3. 交互请求到美女图片
  • axios请求拦截器如何设置请求头

    千次阅读 2020-12-02 19:01:17
    axios请求拦截器如何设置请求头 axios中文文档:http://www.axios-js.com/zh-cn/docs/ axios英文文档:https://www.npmjs.com/package/axios 拦截器-中文版 拦截器(Interceptors)-英文 调用axios接口方法发送...
  • # axios 开启请求携带 cookie axios.defaults.withCredentials = true; axios 默认请求是不携带 cookie 的,但是在前后端分离的情况下,需要利用 cookie 携带需要的 token 进行鉴权,所以我们需要开启 axios 请求...
  • 前端axios请求后台接口, 为了防止用户退出登录或者token超时。前端设置请求拦截器 ,请求头header携带token传给后端 后端拿到token进行校验。 前端: 后端express 写入全局方法拦截除了注册、登录以外的所有接口 ...
  • axios请求拦截器(避免重复请求) 通过node安装axios:npm install axios --save axios请求拦截器可以统一对错误码进行处理,避免重复请求 axios支持并发请求 执行多个并发请求 function getUserAccount() { ...
  • axios请求嵌套同步方法 axios.get('/userAll') .then( async response { console.log(response); //要同步这个方法 await axios.get('/user?ID=12345') .then(function (response) { console.log(response); ...
  • Vue axios请求数据

    2019-02-05 16:43:20
    E:\1前端\VueJS\13 Axios fetchJsonp请求数据\axios请求数据&gt; cnpm install axios --save 哪里使用哪里就引用(第三方模块直接引用就行了.) import Axios from 'axios'; export de...
  • 目录axios是什么axios特点axios常用语法axios安装axios简单使用默认get请求postputdeleteaxios难点语法axios.create(config) 对axios请求进行二次封装axios的处理链流程 拦截器拦截器简单使用多个拦截器取消请求1....
  • Vue axios请求PUT/DELETE请求变OPTIONS

    万次阅读 2017-12-19 16:34:46
    问题:vue项目中使用axios请求,在使用get请求时没问题,在测试PUT/DELETE时出现请求类型变成OPTIONS的情况。
  • 在项目实践中,使用axios设置请求头headers,结果在请求过程中请求头中并没有包含headers中设置的请求头信息,而且后台也没有接收到前台设置的请求头信息,导致数据无法进行校验,请求失败 GET 请求方式 import...
  • axios请求五种方法

    2020-06-11 20:32:32
    axios请求五种方法 一、介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 可以提供以下服务: 从浏览器中创建XMLHttpRequests 从node.js创建http请求 支持PromiseAPI 拦截请求和响应 转换...
  • Vue+axios请求本地json

    千次阅读 2019-05-10 08:46:00
    axios请求本地json,相关依赖安装 1:npm安装 npm install axios --save 2.在main.js下引用axios import axios from 'axios' 一切环境依赖搭建好之后,下面来写个例子:axios请求本地json 1:在...
  • vue3+vite 封装axios请求

    千次阅读 2021-04-29 16:06:28
    vue3+vite 封装axios请求安装axios创建axios实例封装请求方式封装请求接口vue中调用 安装axios npm install axios 创建axios实例 // http/index.js import axios from 'axios' import { ElLoading, ElMessage } ...
  • axios请求params和data区别

    千次阅读 2019-08-26 17:42:04
    axios请求params和data区别 参数:两个数组,一个string,传给后台引发的博客。 在使用axios时,注意到配置选项中包含params和data两者,以为他们是相同的,实则不然。 params是添加到url的请求字符串中的,一般...
  • Vue中axios请求顺序问题

    千次阅读 2020-04-18 18:29:25
    今天在写Vue时,发现有一个axios请求发送失败,因为它所需要的参数是undefined的。该参数id来自于另一个axios请求。 讲道理,我在created钩子中按照如下图所示写好代码。 方法getStudentInfo( )执行后会初始化当前...
  • vue中使用axios请求本地json文件

    千次阅读 2019-12-01 11:06:16
    参考以下网址 vue中使用axios请求本地json文件
  • vue 使用 axios 请求出现options 问题。

    千次阅读 2019-04-19 18:20:17
    vue 使用 axios 请求出现options 问题。vue 使用 axios 请求出现options 问题axios配置springboot配置 vue 使用 axios 请求出现options 问题 axios配置 config.headers[‘Content-Type’] = ‘application/json’ ,...
  • axios请求GBK页面中文乱码解决方法

    千次阅读 2020-07-04 15:07:53
    axios请求GBK页面中文乱码解决方法 在react 的 axios 请求后台文件类型的时候出现如下错误 这时候需要设置GBK转码。请求参数如下。 1 responseType: 'blob', 2 transformResponse: [function (data) { 3 ...
  • Vue使用axios,设置axios请求格式为form-data 这个老生常谈了,还是先记录一遍,方面后面自己查。 !!! 设置form-data请求格式直接翻到后面看。 1. 安装axios 在项目下执行npm install axios。 之后在main.js中,添加...
  • axios请求获取到返回值

    千次阅读 2020-06-18 15:32:32
    axios请求获取到返回值 最近在学习Vue,碰到一个问题就是需要从后端获取到某个返回值之后再运行后面的代码。 一般调用axios接口都是这样的格式。 this.$axios.post('api/xxxx/xxxxx', this.$qs.stringify({ ...
  • vue axios请求方式和传参格式

    千次阅读 2019-08-26 14:36:24
    vue axios请求方式和传参格式 get、delete、head请求只有两个参数,请求参数是放在第二个参数config中,post、put、patch请求有3个参数,请求参数是放在第二个参数data中的。 get和delete请求,请求参数格式是...
  • axios请求默认是不携带 Cookie 的,如果需要携带 Cookie 前端需要配置 withCredentials: true 即 // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: ...
  • Vue:基于axios请求工具封装

    千次阅读 2019-05-14 15:12:58
    axios请求 1.先看项目结构 2.实现 apiconst.js /** * Api 常量配置 */ export const url_host = 'http://192.168.1.109:8090'; axiosconfig.js axios自定义实例配置 import axios from 'axios' import QS ...
  • Vue功能篇 - 3.封装axios请求

    千次阅读 多人点赞 2020-11-18 09:25:36
    Vue封装axios请求库 import axios from 'axios'; import { Message, Loading } from 'element-ui'; import router from '../router'; import _ from 'lodash'; import qs from 'qs'; const http = axios.create({...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,326
精华内容 26,530
关键字:

axios请求