精华内容
下载资源
问答
  • node-koa2-axios ...将路由文件单独分开--- index页面由多个子页面构成-----使用axios请求url获得数据,并将数据渲染到页面 ----增加内存缓存处理(减少页面的请求,加快请求速度) 运行程序:node server
  • 封装好axios后,出现这种情况

    描述:

    封装好axios后,出现这种情况

    或者这样

    有一篇博主这样写的

    这样回答没有一点问题,but!记住改完坏境变量一定要退出当前服务,重新npm run serve才行!刷新网页是没有用的!

    好了,我的宝!

    展开全文
  • this.$axios.put('url',obj) .then((response)=>{ }) .catch((error) => { console.log('error',error); console.log(error.response); }); error.response可以获取到接口返回的数据,从而拿到message等...
    this.$axios.put('url',obj)
    .then((response)=>{
    
         })
    .catch((error) => {
        console.log('error',error);
        console.log(error.response);
        });
    

    error.response可以获取到接口返回的数据,从而拿到message等提示信息

    展开全文
  • vue中axios跨域请求

    万次阅读 2019-06-22 13:22:31
    vue中axios跨域请求 1.axios 是 第三方库 使用方法: 使用 npm: $ npm install axios 使用 bower: $ bower install axios 使用 cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></...

    vue中axios跨域请求

    1.axios 是 第三方库
    使用方法:

    • 使用 npm:
        $ npm install axios
    
    • 使用 bower:
    $ bower install axios
    
    • 使用 cdn:
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    axios get 请求示例

    HTML代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="getData">get-mock-data</button>
            <button @click="get_api_data"> get-api-data </button>
        </div>
        
    </body>
    </html>
    

    js代码

    <script>
              console.log( axios )
            // 当我们引入axios cdn后会全局暴露出一个axios对象
            new Vue ({
                el:"#app",
                methods:{
                    
                      getData(){
                        // var p = axios({
                        //     url:'./data/name.json'
                        // });
                        // console.log(p);//axios是一个promise对象
    
                        axios({
                            url:"./data/name.json",
                            method:'get',//method默认是get请求
                        }).then(function(res){
                            console.log(res)
                            // axios会对我们请求来的结果进行再一次的封装( 让安全性提高 )
                        }).catch(err=>{
                            console.log(err)
                        })
    
                    },
    

    请求结果 : axios会对我们请求来的结果进行再一次的封装( 让安全性提高 )
    在这里插入图片描述

     //get在线跨域请求
                   get_api_data(){
                      axios({
                          url:'https://请求地址',//在线跨域请求
                          method:"GET",//默认是get请求
                          headers:{//设置请求头
                              'X-Client-Info':' {"a":"3000","ch":"1002","v":"5.0.4","e":"15611234619393093477584"}',
                              'X-Host': 'mall.film-ticket.film.list',
                          },
                          params:{//?search后面的值写在params中
                              cityId: 330100,
                              pageNum: 1,
                              pageSize: 10,
                              type: 1,
                              k: 3969168,
                          }
                      }).then(function(val){
                          console.log(val) // axios会对我们请求来的结果进行再一次的封装( 让安全性提高 )
                      }).catch(function(err){
                          console.log(err)
                      })
                  },
              }
          })
      </script>
    

    get跨域请求中params:中的值对应hearders中Query String Parameters
    在这里插入图片描述
    在这里插入图片描述
    get方法总结:

    A: 无参数
            axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error))
     B: 有参数
            axios({
                url: 'http://xxx',
                method: 'get' //默认就是get,这个可以省略,
                params: {
                    key: value
                }
            })
    

    axios post 请求示例

    html代码
     <button  @click="postData"> post-data </button>
     
     js代码
           postData(){
                        let params = new URLSearchParams()//得到params对象,用来接收请求参数
                        // params.append( key, value )  key是参数名,value是参数值
                        //传递参数值
                         params.append( 'a', 2 )
                         params.append( 'b', 2 )
    
                        axios({
                            url:'http//localhost/php',
                            method:'post',
                            headers:{//请求头设置为表单提交的请求头
                                'Content-Type':"application/x-www-form-urlencoded"
                            },
                            data:params,
                        }).then( function (val) {
                            console.log(res)
                        }).catch( function (error) { 
                            console.log(error)
                        })
                    }
                }
                官方文档中axios post请求案例有点问题,请求会出现跨域问题;
    			以上示例为解决官方文档存在问题的写法;
    

    post方法总结

    //对于post请求可以统一设置一个请求头,后面所有post请求就可以不用单独设置请求头了
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    
     // 具体语法
     let params = new URLSearchParams()//得到params对象,用来接收请求参数
    
    // params.append(key,value) //请求参数写成键值对key就是参数名,value就是参数值
    
    params.append('a',1)
    params.append('b',2)
    
    axios({
        url: 'http://localhost/post.php',
        method: 'post',
        data: params,//将请求参数写入data;
          headers: {  //单个请求设置请求头
           'Content-Type': "application/x-www-form-urlencoded"
        }
    })
    .then(res => {
        console.log( res )
    })
    .catch( error => {
        if( error ){
        throw error
    }
    })
    
    展开全文
  • 一、axios 请求发送 axios 请求发送,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...

    一、axios 请求发送

    1. axios 请求发送,代码如下所示:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>axios 发送请求</title>
      <!-- <script src="./node_modules/axios/dist/mine-axios.js"></script> -->
    </head>
    <body>
      <script>
        // 构造函数
        function Axios (config) {
          // 初始化
          //为了创建 default 默认属性
          this.defaults = config;
          this.interceptors = {
            request: {},
            response: {}
          }
        }
    
        // 原型添加相关的方法
        Axios.prototype.request = function (config) {
          console.log('发送 AJAX 请求 请求的类型为 '+ config.method);
        }
    
        Axios.prototype.get = function (config) {
          return this.request({method: 'GET'});
        }
    
        Axios.prototype.post = function (config) {
          return this.request({method: 'POST'});
        }
    
        // 声明函数
        function createInstance (config) {
          // 实例化一个对象
          // context.get()  context.post()  但是不能当做函数使用 context() X
          let context = new Axios(config);
          // 创建请求函数
          // instance 是一个函数 并且可以 instance({})  此时 instance 不能 instance.get X
          let instance = Axios.prototype.request.bind(context);
          //将 Axios.prototype 对象中的方法添加到instance函数对象中
          Object.keys(Axios.prototype).forEach(key => {
            // this.default  this.interceptors
            instance[key] = Axios.prototype[key].bind(context);
          });
          //为 instance 函数对象添加属性 default 与 interceptors
          Object.keys(context).forEach(key => {
            instance[key] = context[key];
          });
    
          return instance;
        }
    
        let axios = createInstance();
        // 发送请求
        // axios({method: 'POST'});
        axios.get({});
        axios.post({});
    
      </script>
    </body>
    </html>
    

    二、axios 请求发送的实现过程

    1. axios 请求发送的实现过程,代码如下所示:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>axios 发送请求实现</title>
      <!-- <script src="./node_modules/axios/dist/mine-axios.js"></script> -->
    </head>
    <body>
      <script>
        // axios 发送请求   axios  Axios.prototype.request  bind
        // 1. 声明构造函数
        function Axios (config) {
          this.config = config;
        }
    
        Axios.prototype.request = function (config) {
          // 发送请求
          // 创建一个 promise 对象
          let promise = Promise.resolve(config);
          // 声明一个数组
          // undefined 用来占位
          let chains = [dispatchRequest, undefined];
          // 调用 then 方法指定回调
          let result = promise.then(chains[0], chains[1]);
          // 返回 promise 的结果
          return result;
        }
    
        // 2. dispatchRequest 函数
        function dispatchRequest (config) {
          // 调用适配器发送请求
          return xhrAdapter(config).then(response => {
            // 响应的结果进行转换处理
            // ...
            return response;
          }, error => {
            throw error;
          });
        }
    
        // 3. adapter 函数
        function xhrAdapter (config) {
          console.log('xhrAdapter 函数执行');
          return new Promise((resolve, reject) => {
            // 发送 ajax 请求
            let xhr = new XMLHttpRequest();
            // 初始化
            xhr.open(config.method, config.url);
            // 发送
            xhr.send();
            // 绑定事件
            xhr.onreadystatechange = function () {
              if (xhr.readyState === 4) {
                // 判断成功的条件
                if (xhr.status >= 200 && xhr.status < 300) {
                  // 成功的状态
                  resolve({
                    // 配置对象
                    config: config,
                    // 响应体
                    data: xhr.response,
                    // 响应头  字符串  parseHeaders
                    headers: xhr.getAllResponseHeaders(),
                    // xhr 请求对象
                    request: xhr,
                    // 响应状态码
                    status: xhr.status,
                    // 响应状态字符串
                    statusText: xhr.statusText
                  });
                } else {
                  // 失败的状态
                  reject(new Error('请求失败 失败的状态码为' + xhr.status));
                }
              }
            }
          });
        }
    
        // 4. 创建 axios 函数
        let axios = Axios.prototype.request.bind(null);
        axios({
          method: 'GET',
          url: 'http://localhost:3000/posts',
        }).then(response => {
          console.log(response);
        });
    
      </script>
    </body>
    </html>
    
    展开全文
  • vue中axios固定url请求前缀

    千次阅读 2019-01-29 13:59:50
    main.js中添加: 使用方法:
  • Visual Studio Code 使用指南axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,网络请求框架。支持的浏览器:一、安装axios1.打开vs code ,导入我们之前创建好的vue项目 helloword ,打开终端...
  • 拦截器定义好后的请求数据方法有两种:一种是定义好拦截器的页面内直接写service axios请求;另一种,是另外一个页面导入拦截器,然后封装service请求(其实就是axios请求)。 活跃于三个文件夹:view util api 1、...
  • axios请求REST接口示例

    2020-11-06 13:43:04
    axios 请求接口的方式 get:一般多用于获取数据 post:主要提交表单数据和上传文件 put:对数据全部进行更新 patch:只对更改过的数据进行更新 delete:删除请求 Get 示例一:不带参数 前端 后端 示例一:不...
  • 今天小编就为大家分享一篇Vue axios设置访问基础路径方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue axios请求 配置

    万次阅读 多人点赞 2019-03-02 15:29:22
    axios : 基于http客户端的promise,面向浏览器和...axios 依赖原生的 ES6 Promise 实现而被支持. 安装 1.使用npm: npm install axios 2.使用taobao源: cnpm install axios 3.使用bower: bower install ax...
  • axios请求五种方法 一、介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 可以提供以下服务: 1、从浏览器中创建XMLHttpRequests 2、从node.js创建http请求 3、支持PromiseAPI 4、拦截请求...
  • axios请求超时

    2020-07-22 11:09:52
    axios请求超时,设置重新请求的完美解决方法 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。 具体原因...
  • 请求中如果url包括特殊字符的话,可能会导致接口接收参数失败(例:空格 被转换成 + 号),所以前端一般会对特殊字符进行encode encodeURI 对一个完整的URI 进行编码, 而encodeURIComponent对URI 的一个组件(单个...
  • Vuejs通过Axios请求数据

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

    2021-03-08 09:53:49
    axios请求五种方法 一、介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 可以提供以下服务: 1、从浏览器中创建XMLHttpRequests 2、从node.js创建http请求 3、支持PromiseAPI 4、...
  • 进行快速axios请求测试的html文件

    千次阅读 2020-05-25 18:08:53
    <!... <... <head> ...meta charset="utf-8">...快速测试axios请求</title> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script> <script> var.
  • axios请求五种方式

    千次阅读 2020-10-19 09:01:46
    一、介绍 Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中 可以提供以下服务: 1、从浏览器中创建XMLHttpRequests 2、从node.js创建http请求 ...2、axios五种请求:  1.get: 一般.
  • Vue中的axios请求设置base_url几种方式
  • vue项目及axios请求获取数据

    万次阅读 多人点赞 2018-09-17 10:12:46
    一般vue项目中 一个页面是由多个组件组成的,各个组建的数据都是统一在主界面的组件中发送axios请求获取,这样极大地提高了性能。 首先要导入用到的组件和axios import HomeHeader from './components/Header' ...
  • 1.URL地址错误,https://或者http://写错了。(占比90%) 2.URL地址正确,但是 VUE_APP_BASE_API = ‘http://10.196.33.41:8082/crm-admin’ 前后有空格,去掉空格就好了。 ENV = 'development' # base api (此处不...
  • 1.uni-app request请求 uni.request({ url: 'http://localhost/myUniApp/php/login.php', //仅为示例,并非真实接口地址。 data: {//参数 rawData: rawData, code: loginRes.code }, header:...
  • 走登录的接口都会返回一个...// 在封装axios的文件中添加拦截器 // 添加请求拦截器,在请求头中加token service.interceptors.request.use( config => { // 判断本地的cookie中是否有token if (VueCookie.isKey('tok
  • axios请求文件流下载文件

    万次阅读 2019-04-30 16:07:49
    axios.post('/api',{ // 传参 }, { responseType:'blob' // 设置响应数据类型 }) .then(res=>{ if (res.status == 200) { let url = window.URL.createObjectURL(new Blob([res.data])) ...
  • axios 请求找不到参数

    2020-09-08 08:33:40
    axios 请求(找不到参数) 如下图 :可以看到我们已经获取到id ,但还是显示缺少参数 ** 这时我们可以创建实例化axios,定义一些规则,如请求头来解决** 如下代码 import axios from 'axios' import { METHOD } ...
  • query接收参数。 http请求方式 GET POST PUT PATCH DELETE OPTIONS Restful API:利用上面的反射光hi来表示动词,完成对资源的增删改查操作。 GET / articles GET / articles / :id
  • axios请求方式实例

    2019-01-14 21:17:17
    axios.get(url[, config]) 【axios.get(‘接口地址’,{params{参数}}).then((res)=&gt;{})】 axios .get("http://localhost:3000/categories", { params: { _page: 1, _limit: 2 ...
  • axios 请求nodeIntroduction 介绍 A video tutorial 视频教程 Installation 安装 The Axios API Axios API GET requests GET请求 Add parameters to GET requests 向GET请求添加参数 POST Requests POST请求 介绍 ...
  • axios请求后台数据并渲染

    千次阅读 2020-06-24 15:52:50
    在methods方法中定义一个方法,然后通过axios请求,代码如下: getTabelInfo(){ let _that = this; axios.post(' /shopStaffSkuSuffix/list') .then(res=>{ _that.getTabeldata = res.data.rows
  • 使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面转载一个很好的解决方案: https://juejin.im/post/5abe0f94518825558a06bcd9 ...

空空如也

空空如也

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

获取axios请求的url