• 以下 是 对 axios 请求 错误的处理 ( 困扰我好长时间 的 ...axios.get('/user/12345') .catch(function (error) { if (error.response) { // The request was made and the server responded with a status code...

    以下 是 对 axios 请求 错误的处理 ( 困扰我好长时间 的 问题 终于 解决了!)

    axios.get('/user/12345')
      .catch(function (error) {
        if (error.response) {
          // The request was made and the server responded with a status code
          // that falls out of the range of 2xx
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // The request was made but no response was received
          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
          // http.ClientRequest in node.js
          console.log(error.request);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log('Error', error.message);
        }
        console.log(error.config);
      });

    下图控制台 打印出的 结果 : 

    展开全文
  • vue.js axios

    2017-12-21 23:06:44
    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段...一、引入axios.js 二、例子 1、 发送一个GET请求 //通过给定的ID来发送请求 axios.get('/user?ID=12345') .then(functio
     vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。


    本案例给单独引入vue.js文件的用户参考。

    一、引入axios.js
    <script src="../script/axios.min.js"></script>

    二、例子

    1、  发送一个GET请求

    //通过给定的ID来发送请求 axios.get('/user?ID=12345')  .then(function(response){    console.log(response);  })  .catch(function(err){    console.log(err);  }); //以上请求也可以通过这种方式来发送 axios.get('/user',{  params:{    ID:12345  } }) .then(function(response){  console.log(response); }) .catch(function(err){  console.log(err); });
    关于get请求的参数传递,你既可以直接拼接在路径中,也可以通过params来传递,交互他会帮你转为字符串拼接在路径上

    2、 发送一个POST请求

    axios.post('/user',{  firstName:'Fred',  lastName:'Flintstone' }) .then(function(res){  console.log(res); }) .catch(function(err){  console.log(err); });


    展开全文
  • 今天在写请求时,使用了…catch…finally,发现报错Uncaught TypeError: Object(…)(…).then(…).catch(…).finally is not a function 升级浏览器后仍旧无法解决问题 调试发现 axios(res=>{}).catch(e=>{}) ...

    今天在写请求时,使用了…catch…finally,发现报错Uncaught TypeError: Object(…)(…).then(…).catch(…).finally is not a function
    升级浏览器后仍旧无法解决问题
    调试发现 axios(res=>{}).catch(e=>{}) 是可以的,加了finfially后报错。(fetch可以用finfially)
    在这里插入图片描述

    解决:

    1、先安装promise.prototype.finally依赖

    npm i promise.prototype.finally

    2、在main.js里引入此依赖包

    require(‘promise.prototype.finally’).shim();

    展开全文
  • 官网上的写法: ...axios.post(url, data) .then(response =&gt; { console.log(response); }) .catch(error =&gt; { console.log(error); }) 公司项目的写法: axios.post(url, data) ....

    官网上的写法:

    axios.post(url, data)
        .then(response => {
            console.log(response);
        })
        .catch(error => {
               console.log(error);
        })
    

    公司项目的写法:

    axios.post(url, data)
        .then(response => {
            console.log(response);
        }, error => {
            console.log(error);
        })

    之前一直没有仔细研究过then和catch的写法,事实上,这个不是 axios catch 的相关 而是关于 new Promise() 的then
    阮一峰在 promise 文档中有介绍。

    一般来说,不要在then方法里面定义 Reject 状态的回调函数(即then的第二个参数),总是使用catch方法。
    // bad
    promise
      .then(function(data) {
        // success
      }, function(err) {
        // error
      });
    
    // good
    promise
      .then(function(data) { //cb
        // success
      })
      .catch(function(err) {
        // error
      });
    上面代码中,第二种写法要好于第一种写法,理由是第二种写法可以捕获前面then方法执行中的错误,也更接近同步的写法(try/catch)。因此,建议总是使用catch方法,而不使用then方法的第二个参数。
    

    公司的写法无法catch第一个参数的异常

    这样写可能容易看懂一些:

    axios.post(url, data)
        .then(response => {
            //处理逻辑
        }, error => {
            console.log('接口报错');
        })
        .catch(error=>{
            console.log('处理逻辑出错');
        })
    axios.post(url, data)
        .then(response => {
            //处理逻辑
        })
        .catch(error=>{
            console.log('接口或处理逻辑出错');
        })

     

    展开全文
  • 1.安装 axios 与 vue-axios npm install axios npm install vue-axios 在页面import 刚刚安装的两个工具包 import VueAxios from 'vue-axios' import axios from 'axios' Vue.use(VueAxios, axios) 下面我们...

    一. 在vue中引入axios


    1.安装 axiosvue-axios

    npm install axios
    npm install vue-axios

    1. main.jsimport 刚刚安装的两个工具包
    import VueAxios from 'vue-axios'
    import axios from 'axios'
    
    Vue.use(VueAxios, axios)
    
    1. 下面我们就可以在页面里面使用axios
    this.axios.get('http://127.0.0.1/your_url')
      .then(res => {
        console.log(res)
      }).catch( err => {
      this.$notify({title: '错误', message: err, type: 'warning'})
                  return false
            })
    

    二. 封装axios

    朋友说直接使用this.axios.get/post 太蠢,给我一个例子,我看了看,感觉改起来有点难,就自己尝试封装了一下,下面是具体过程

    1. src/ 文件夹下新建config/common/ 文件夹
    2. common/ 文件夹下面新建立一个 config.js文件,代码如下:
    const path = require('path')
    
    module.exports = {
      baseUrl: 'http://your_api_url_address'
    }
    
    1. 再在同一目录下新建index.js文件,代码如下:
    import config from './config'
    
    export function post (url, data) {
      var urlPath = config.baseUrl + url
      return new Promise((resolve, reject) => {
        this.axios.post(urlPath, data)
          .then(res => {
            resolve(res.data)
          }).catch(error => {
          var status = error.response.status
          switch (status) {
            case 404:this.$router.push('not-found')
              break
            default:this.$router.push('not-found')
              break
          }
          // reject(error.response.status + error.response.statusText)
        })
      })
    }
    

    catch里面我根据返回状态进行了判断然后进行跳转,
    你可以根据需求添加其他的返回状态,或者去掉跳转,把reject的注释打开,
    捕捉的错误会发送到调用方法的catch里面

    1. src/下新建http文件夹,在文件夹下新建一个404页面,在访问路由404的时候使用,内容自定义,我的代码如下:
    <template>
      <div>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <h2>404 NOT FOUND</h2>
            </div>
          </el-col>
        </el-row>
      </div>
    </template>
    
    <script>
      export default {
        name: 'not-found'
      }
    </script>
    
    <style scoped>
    
    </style>
    
    1. 注册需要的路由,我这里只写了一个 404 not-found 路由,其他路由可自行添加
    import Vue from 'vue'
    import Router from 'vue-router'
    import NotFound from '@/config/http/not-found'
    
    Vue.use(Router)
    
    const router = new Router({
      routes: [
        {
          path: '/not-found',
          component: NotFound,
          name: 'not-found'
        }
      ]
    })
    export default router
    
    1. main.js中引入配置
    import { post } from './config/common/index'
    
    Vue.prototype.$post = post
    

    可以在common 配置里面再写一个get方法,引入的时候post后面加个get就好

    三. 使用

     this.$post('/login', this.FD(this.loginForm))
      .then(res => {
        // 业务代码
        })
    

    至此完成。由于本人刚学vue,当中可能存在一些问题,希望各位能提出指正。

    展开全文
  • 使用vue.js和axios能解决get/post方式的跨域。但需要vue.js/node.js的基础知识。具体操作如下: 1、使用vue-cli脚手架创建一个vue工程: 2、修改config/index.js文件,在proxyTable中添加代理项,添加内容后如下:...
  • 在调试后端接口遇到这样的跨域报错提示: Access to XMLHttpRequest at ‘http://192.168.xxx.xxx:xxx/xxxx’ from origin ‘http://localhost:8010’ has been blocked by CORS policy: The ‘Access-Control-...
  • 需求 事情是这样的,易班的签到实时数据展示中,只能手动输入学生的ID号,单个进行查询,这怎么能忍! 接口信息如下图 ...参数studentid对应的是你要查询的ID情况 我要把所有人的信息一起获取出来,省的手动挨个输入...
  • Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Features 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 ...
  • 1.解决办法在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数”=>”来解决。... this.$axios.post('http://127.0.0.1/u/subLogin', { username: this.usern
  • import axios from ‘axios’ import qs from ‘qs’ export class HttpService { Get(url, data) { return new Promise((resolve, reject) => { axios.get(url, { params: data })....
  • 框架项目用axios调用接口时,我们常用:接口名().then(result=&gt;{ do sth... }).catch(()=&gt;{ do sth... }).finally(()=&gt;{ do sth... }) 却会遇到这个问题:fName(...).then(...).catch(...)....
  • Vue2.x axios发送post请求

    2018-11-23 16:55:15
    Vue2.x axios发送post请求安装axios配置main.jsvue文件内 script代码演示图 安装axios $ npm install axios ...script src=“https://unpkg.com/axios/dist/axios.min.js” 配置main.js 以下代码...
  • vue中axios传参

    2019-07-18 22:30:51
    安装 npm install axios --save 安装 main.js配置 文件中使用 methods: { findStudentGradeList () { this.$axios.post('/api/student/findStudentGradeList', this.studentGrade, {headers: {'content-Ty...
  • axios基本用法

    2018-06-08 16:28:41
    一.axios1.什么是axiosaxios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装它本身具有以下特征: a.从浏览器中创建 XMLHttpRequest b.从 node.js 发出 http 请求 c.支持 ...
  • this.$axios({ headers: { "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" }, method: "POST", url: "http://crm.tonyliangli.cn/api/company/companyUsers", data: { token: ...
  • 项目中需要实现二进制流文件下载,采用Blob方式 首先采用axios进行get请求. 代码如下: import axios from 'axios' const instant = axios.create({ withCredentials: true, ...
  • 在学习axios时,对于defaults很是迷惑; 仔细阅读了axios的配置后,在学习defaults就会简单很多; 在axios配置中存在...axios.defaults.baseURL ="https://www.baidu.com/" //创建实例 var insta...
  • vue.js中Axios的使用

    2018-04-25 15:06:06
    作者在接过同事写的代码后,发现里面有个叫Axios的东西不知道是干啥用的,自行百度之后理解了他的意思,在这里跟大家分享一下 1.什么是Axios https://www.kancloud.cn/yunye/axios/234845这是官方中文文档,大家...
1 2 3 4 5 ... 20
收藏数 16,888
精华内容 6,755
热门标签