精华内容
下载资源
问答
  • vue-前后端交互-axios

    2020-07-28 00:02:51
    vue-前后端交互-axios 目录 文章目录1、基本特性2、基本用法3、axios 常用API4、axios参数传递4.1、GET与DELETE请求方式4.2、POST和PUT请求方式5、axios响应数据5.1、响应结果的主要属性6、axios的全局配置6、...

    vue-前后端交互-axios


    目录




    内容

    1、基本特性

    axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,它具有以下特征:

    • 支持浏览器和nodejs
    • 支持promise
    • 能拦截请求和响应
    • 自动转换JSON

    2、基本用法

    • 格式

         axios.get(baseUrl)
        			.then(ret => {
        			// data属性名是固定的,用于获取用于后去后台响应的数据
        				console.log(ret.data);
        			})
      
    • 示例代码2-1:

        // 后台路由
        app.get('/adata', (req, res) => {
          res.send('Hello axios!')
        })
        
        // 前端代码
        <!DOCTYPE html>
        <html lang="en">
        <head>
        	<meta charset="UTF-8">
        	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        	<title>axios</title>
        </head>
        <body>
        	<script src="../../node_modules/axios/dist/axios.js"></script>
        	<script>
        		const baseUrl = 'http://localhost:3000/adata'
        		axios.get(baseUrl)
        			.then(ret => {
        				console.log(ret.data);
        			})
        	</script>
        </body>
        </html>
        
        // 结果
        Hello axios!
      

    3、axios 常用API

    • get:获取
    • post:添加
    • put:修改
    • delete:删除

    4、axios参数传递

    4.1、GET与DELETE请求方式

    DELETE请求方式与GET类似,这里一GET方式讲解。

    • URL传参

        axios.get(url?query) 传统URL
        axios.get(url/query) Restful
      
    • 示例代码4.1-1:

        // 后台路由:
        app.get('/axios', (req, res) => {
          res.send('axios get 传递参数' + req.query.id)
        })
        app.get('/axios/:id', (req, res) => {
          res.send('axios get (Restful) 传递参数' + req.params.id)
        })
      
        // 前端页面,省略其他本分(同上),只给出js代码
      
        const baseUrl = 'http://localhost:3000/axios'
        axios.get(baseUrl + '?id=122')
        	.then(ret => {
        		console.log(ret.data);
        	})
      
        axios.get(baseUrl + '/123')
        .then(ret => {
        	console.log(ret.data);
      
        // 结果
        axios get 传递参数122
        axios get (Restful) 传递参数123
      
    • params传参

        axios.get(url, {
        	属性名1: 值1,
        	属性名2: 值2,
        	...
        })
      
    • 示例代码4.1-2:

        // 后台路由
        app.get('/axios', (req, res) => {
          res.send('axios get 传递参数' + req.query.id)
        })
        // js代码
        axios.get(baseUrl, {
        			params: {
        				id: 124
        			}
        		})
        		.then(ret => {
        			console.log(ret.data);
        		})
        
        // 结果
        axios get 传递参数124
      

    4.2、POST和PUT请求方式

    PUT请求方式与POST类似,这里用POST方式讲解。

    • 通过选项传递参数(默认传递的是JSON数据)

        axios.post(url, {
        			属性名1: 值1,
        			属性名2: 值2,
        			...
        		})
      
    • 示例代码4.2-1:

        //后台路由
        app.post('/axios', (req, res) => {
          res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
        })
        // 前端js
        const baseUrl = 'http://localhost:3000/axios'
        		 axios.post(baseUrl, {
        			params: {
        				uname: 'zhangsan',
        				pwd: '123'
        			}
        		})
        		.then(ret => {
        			console.log(ret.data);
        		})
        // 结果
        axios post 传递参数zhangsan---123
      
    • 通过URLSearchParams传递参数(application/x-www-form-encoded)

        let params = new URLSearchParams()
        params.append('param1', 'value1')
        params.append('param2', 'value2')
        axios.post(url,params)
      
    • 示例代码4.2-2:

        // 后台路由同上
        // 前端js
        let params = new URLSearchParams()
        		params.append('uname', 'zhangsna')
        		params.append('pwd', '123')
        		axios.post(baseUrl, params)
        			.then(ret => {
        				console.log(ret.data);
        			})
      
        params = 'uname=zhangsan&pwd=123'
        axios.post(baseUrl, params, {
        	headers: {
        		'Content-Type': 'application/x-www-form-urlencoded'
        	}
        })
        	.then(ret => {
        		console.log(ret.data);
        	})
      
        //结果:
        axios post 传递参数zhangsan---123
      

    5、axios响应数据

    5.1、响应结果的主要属性

    • data:实际响应会的数据
    • header:响应头信息
    • status:响应状态码
    • statusText:响应状态码描述

    6、axios的全局配置

    常用配置如下:

    • axios.default.timeout = … // 设置超时时间,单位ms
    • axios.default.baseURL = … // 设置域名基本路径,请求的时候,直接拼接请求方法中的url
    • axios.default.hdears = {…} // 设置请求头信息

    6、axios拦截器

    6.1、请求拦截器

    在发出请求之前,设置一些信息

    • 格式

        axios.interceptors.request.use(functions(config) {
        	// 信息设置
        	return config
        }, function(err) {
        	// 处理响应的错误信息
        })
      

    常用于登录信息的校验等。

    • 添加mytoken已登录信息示例代码6.1-1

        axios.interceptors.request.use(functions(config) {
        			config.header.mytoken = 'user'
        			return config
        		}, function(err) {
        			// 处理响应的错误信息
        		})
      

    6.2、响应拦截器

    在获取数据之前,对数据做一些加工处理

    • 格式

        axios.interceptors.response.use(function(ret) {
        	if(ret.status !== 200) {
        		// 其他处理
        	}
        	// 200直接返回实际数据
        	return ret.data
        	
        }, function(err) {
        	// 处理响应错误
        })
      
    • 如果响应200就直接获取数据

    axios.interceptors.response.use(function(ret) {

    return ret
    

    }, function(err) {
    // 处理响应错误
    })

    后记

    vue官网地址:https://cn.vuejs.org/

    本项目为参考某马视频开发,相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档,持续更新。欢迎交流,本人QQ:806797785

    前端项目源代码地址:https://gitee.com/gaogzhen/vue
        后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA

    展开全文
  • Springboot+Vue前后端交互---axios

    千次阅读 2020-06-14 21:15:35
    一.前端发送请求 1.导入axios import axios from 'axios' axios支持多种请求方式,....then后为回调函数,即发送成功后后端返回数据至res,则可得到res进行处理,如res.data即为后端return返回值,为获取具体内容可使用

    一.前端发送请求
    1.导入axios

    import axios from 'axios'
    

    axios支持多种请求方式,其中常用方式如下:

    axios.get(url, params).then(res => { do something })
    axios.post(url, data).then(res => { do something })
    

    .then后为回调函数,即发送成功后后端返回数据至res,则可得到res进行处理,如res.data即为后端return返回值,为获取具体内容可使用console.log(res)进行查看

    二.springboot接收数据
    1.预备知识
    (1)在类前使用@RestController注解则函数return将为json数据,因为vue全权负责前端,因此springboot的controller类通常均需要添加此注解,且其实际为@ResponseBody与@Controller的简写形式

    (2)@RequestMapping,@PostMapping,@GetMapping的区别:使用@RequestMapping注解则可接受post与get请求,@PostMapping仅接受post请求,@GetMapping注解仅接受get请求。在方法前添加此注解并声明路径,则声明路径即为访问路径,如
    在这里插入图片描述
    则其访问路径即为http://localhost:8080/index

    2.个人常用接收方式
    (1)接收get请求数据:
    使用@PathVariable注解:

    	@RequestMapping("/find/{articleID}")
        public Article findArticleByID(@PathVariable("articleID") String articleID){
            return articleMapper.findArticleByID(articleID);
        }
    

    解释:
    @RequestMapping("/find/{articleID}")中的{articleID}即为上传的数据值,则此时若前端想要传输值为6,则访问url为:http://localhost:8080/find/6,由于使用了@PathVariable注解,因此其值将自动传入注解后的变量,即String articleID

    (2)接收post请求数据
    使用@RequestBody注解:

    	@RequestMapping("/addcomment")
        public Integer addComment(@RequestBody ArticleComment articleComment){
            return articleCommentMapper.addNewComment(articleComment);
        }
    

    解释:@RequestBody将自动将传输值填充入其后的java类,且此java类通常为bean类,即其每一个属性均对应于数据表中的某一字段,注:需为bean类添加set和get方法

    三.实战
    前端:

    submit(){
        let url = 'http://localhost:8080/add';
        axios.post(url,{userPassword:this.password,userName:this.username,email:this.email,phoneNumber:this.phone}).then(res=>{
            if(res.data == 0){
                alert('用户已存在');
                return;
            }
        })
    }
    

    后端:

    	@RequestMapping("/add")
        public Integer addNewUser(@RequestBody User user){
            if(userMapper.selectUserByName(user.getUserName()) != null)
                return 0;//用户名已存在
            return userMapper.addNewUser(user);
        }
    

    四.axios小扩展
    为防止程序对框架的过度依赖,通常在一个文件内实例化axios,则在框架改变时改变此文件即可。具体做法:
    创建networks文件夹,在其下创建request.js文件

    import axios from 'axios'
    export function request(config){
    	const instance = axios.create({
    		baseURL:'http://localhost:8080',
    		timeout:5000
    		})
    		return instance(config);
    }
    

    则调用方式:

    request({
    	url:'/add'
    	}).then(res=>{
    	}).catch(err=>{
    	})
    

    此请求方式为默认为get请求,但使用post请求发生未知错误,大概为使用方式错误,可自行百度解决。

    展开全文
  • vue axios前后端数据交互

    万次阅读 多人点赞 2018-04-11 08:05:54
    axios作为Vue生态系统中浓墨重彩的一笔,我学习这个东西也是花了一定的时间的。刚开始的时候,也是遇到了很多问题。 逐渐摸透了它的脾气。 首先说说FormData和Payload两种数据格式的区别: 先是提交一个FormData...

    axios作为Vue生态系统中浓墨重彩的一笔,我学习这个东西也是花了一定的时间的。刚开始的时候,也是遇到了很多问题。

    逐渐摸透了它的脾气。

    首先说说FormData和Payload两种数据格式的区别:

    先是提交一个FormData的请求试试看:

    然后我们看后端:

    然后我们提交一个以Payload传输数据的请求:

    我们再切到后台:

    这就是使用axios和jquery ajax最大的区别。

    jquery提交数据的时候,默认是以FormData的形式提交的,也就是Content-Type:"application/x-www-form-urlencoded",

    而默认axios是使用的是Payload形式提交数据,也就是Content-Type:"application/json"

    如何切换呢,我们需用应用以下方式:

    [javascript] view plain copy

    1. var params = new URLSearchParams();  
    2. params.append('param1''value1');  
    3. params.append('param2''value2');  

    它的意思,其实就是把这样的数据(对象){ name:"yangxu",age:23 } 转换成这样的数据(字符串) "name=yangxu&age=23"这样的查询字符串。

     

    如果我们每次需要传递数据的时候,都这样写,是很复杂的,于是,我们可以进行一次全局配置,将请求数据按照需求进行相应的转化:

     

    [javascript] view plain copy

    1. import Vue from 'vue'  
    2. import querystring from 'querystring'  
    3. import axios from "axios"  
    4.   
    5. export const baseURL = process.env.NODE_ENV === 'production' ? '/' : '/api';  
    6.   
    7.   
    8. export const http = axios.create({  
    9.   baseURL: baseURL,  
    10.   timeout: 10000,  
    11.   withCredentials: true,  
    12.   headers: {'X-Requested-With''XMLHttpRequest'},  
    13.   transformRequest: [data => {  
    14.     return querystring.stringify(data);  
    15.   }]  
    16. });  

     

    然后,我们可以把这个axios的实例挂在到Vue的原型上:Vue.prototype.$http=http;

    然后在Vue的组件里面,就可以这样用:

     

    [javascript] view plain copy

    1. this.$http.post('/Home/GetInfo',{  
    2.         sName:"yangxu",  
    3.         sId:20  
    4.       })  
    5.        .then(function (response) {  
    6.          console.log(response);  
    7.        })  
    8.        .catch(function (error) {  
    9.          console.log(error);  
    10.        });  

     

    这样,问题虽然解决了,我们需要进行反思。

    FormData和Payload传输数据应用场景:我个人根据自己的实际开发进行总结得出,如果前台提交给后台的数据是确定的(什么是确定的,就是你提交的数据格式不会因为用户的操作而改变,如可选项,用户填写了那么提交,没就不提交,后台接收是可空类型),如果是不确定的(比如我用户点击一个操作,就必须新增一条数据,后台记录的是前台提交过去的数组),此时可以采用Payload形式提交。总之,根据自己的业务选择合适的数据提交方式。

    有一种特殊的业务场景,就是需要进行文件上传的时候,此时我们只能采用Payload的形式上传。

    先看业务场景截图:

    我们想在上传文件的时候,并且同时带给后端一些数据,那么,我们采用HTML5提供的FormData API,这个对象比较特殊,不要尝试破坏它的结构,否则是无法上传的,具体的使用方式请参考MDN。

    此时,我们需要对我们的transformRequest方法进行一些修改:

    我们在调用的时候,手动指定Content-Type为“application/json”,告诉axios不要对我们的数据进行任何操作即可。

     

    使用 axios 实现 ajax 方案

    vue.js 自2.0版本已经不对 vue-resource 更新了,官方推荐使用 axios 解决方案。axios 使用了 Promise,而 jquery 自3.0 版本才支持 Promise,如果你只是想使用 jquery 的 ajax 的话,引入整个 jquery 是很大的负担,所以 axios 是一个很好的工具。

    知识点: 
    1.webpack 
    2.ES6 
    3.babel 
    4.node npm 
    5.eslint 
    6.axios 
    7.DOS基本命令


    注意:需要使用 node环境,请先安装node,并学习 npm 的使用方法。

    为了熟练操作,该文章中会使用一些DOS命令,很多人觉得window比linux方便,但是当你用习惯了linux命令的话,操作确实比window方便很多。

    开始

    创建项目目录

    打开 DOS,切换到一个目录下,使用: 
    md axiosTest

    建立空文件夹, 然后使用模糊匹配切换到创建的目录: 
    cd axios*

    使用 npm init 创建 package.json 文件: 
    package.json

    项目文件

    创建 webpack.config.js 文件: 
    webpack.config.js:

    
    module.exports = {
        entry: {
            page1: './main'
        },
        output: {
            path: __dirname + '/build',
            filename: '[name].bundle.js'
        },
        module: {
            loaders:[
                {
                    test: /\.js$/,
                    loaders: ['babel-loader', 'eslint-loader'],
                    exclude: '/node_modules'  /*排除该文件夹*/
                }
            ]
        }
    }
    
    
    

    同目录下建立 main.js:

    import app from './app';

    同目录建立 app.js:

    import axios from 'axios';
    
    
    //请求前拦截
    axios.interceptors.request.use((config) => {
        console.log("请求前拦截!");
        return config;
    }, (err) => {
        return Promise.reject(err);
    });
    
    //发送一个 get 请求
    axios.get('package.json')
        .then( (res) => {
            console.log(res);
        })
        .catch( (err) => {
            console.log(err);
        });

    同目录建立 index.html:

    <html>
    <head>
        <title>axios</title>
        <meta name="charset" content="utf8">
        <script type="text/javascript" src="./build/page1.bundle.js"></script>
    </head>
    <body>
    
    </body>
    </html>

    因为使用了 eslint, 所以编写 配置文件,同目录建立 .eslintrc:

    {
        "parser": 'babel-eslint',
        "rules": {
            // allow paren-less arrow functions
        'arrow-parens': 0,
        // allow async-await
        'generator-star-spacing': 0,
        // http://eslint.org/docs/rules/comma-dangle
        'comma-dangle': ['error', 'only-multiline'],
        'semi': 0,
        'eol-last': 2
        }
    }

    安装必要模块

    使用 npm install --save-dev XXX 安装以下模块:

    1. webpack
    2. webpack-dev-server
    3. babel-core
    4. babel-eslint
    5. babel-loader
    6. babel-preset-es2015
    7. babel-preset-stage-2
    8. eslint
    9. eslint-loader
    10. axios

      可以看到我们的 package.json 中已经有了安装的模块,继续在 scripts中添加我们的编译和启动静态服务器的命令: 
      package.json:

     {
      "name": "axios_test",
      "version": "1.0.0",
      "description": "axios test",
      "main": "index.js",
      "scripts": {
        "server": "webpack --progress --colors && webpack-dev-server --hot --watch --port 8086"
      },
      "keywords": [
        "axios"
      ],
      "author": "zhao",
      "license": "MIT",
      "devDependencies": {
        "axios": "^0.16.1",
        "babel-core": "^6.24.1",
        "babel-eslint": "^7.2.2",
        "babel-loader": "^6.4.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-stage-2": "^6.24.1",
        "eslint": "^3.19.0",
        "eslint-loader": "^1.7.1",
        "webpack": "^2.4.1",
        "webpack-dev-server": "^2.4.2"
      }
    }
    

    运行

    在 DOS 中对应工程目录下输入: 
    npm run server

    项目开始编译及启动服务器:

    npm run server

    在浏览器输入: 
    http://localhost:8086/

    可以看到运行结果: 


    好了,上述只是用 综合的知识搭建了一个基本框架,下面详细讲述 axios 的内容。

    原文

    axios

    基于http客户端的promise,面向浏览器和nodejs

    特色

    1. 浏览器端发起XMLHttpRequests请求
    2. node端发起http请求
    3. 支持Promise API
    4. 监听请求和返回
    5. 转化请求和返回
    6. 取消请求
    7. 自动转化json数据
    8. 客户端支持抵御

    可以看到比 jquery 的 ajax 强多了!

    示例

    get 请求:

    //发起一个user请求,参数为给定的ID
    axios.get('/user?ID=1234')
    .then(function(respone){
        console.log(response);
    })
    .catch(function(error){
        console.log(error);
    });
    
    //上面的请求也可选择下面的方式来写
    axios.get('/user',{
        params:{
            ID:12345
        }
    })
        .then(function(response){
            console.log(response);
        })
        .catch(function(error){
            console.log(error)
        });

    post 请求:

    axios.post('/user',{
        firstName:'friend',
        lastName:'Flintstone'
    })
    .then(function(response){
        console.log(response);
    })
    .catch(function(error){
        console.log(error);
    });

    多重并发请求:

    function getUserAccount(){
        return axios.get('/user/12345');
    }
    
    function getUserPermissions(){
        return axios.get('/user/12345/permissions');
    }
    
    axios.all([getUerAccount(),getUserPermissions()])
        .then(axios.spread(function(acc,pers){
            //两个请求现在都完成
        }));

    axios API 

    axios(config)

    //发起 POST请求
    
    axios({
        method:'post',
        url:'/user/12345',
        data:{
            firstName:'Fred',
            lastName:'Flintstone'
        }
    });

    axios(url[,config])

    //发起一个GET请求
    axios('/user/12345/);

    为了方便,axios提供了所有请求方法的重命名支持

    axios.request(config)

    axios.get(url[,config])

    axios.delete(url[,config])

    axios.head(url[,config])

    axios.post(url[,data[,config]])

    axios.put(url[,data[,config]])

    axios.patch(url[,data[,config]])

    注意

    当时用重命名方法时 url , method ,以及 data 特性不需要在config中设置。

    并发 Concurrency

    有用的方法

    axios.all(iterable)

    axios.spread(callback)

    创建一个实例

    你可以使用自定义设置创建一个新的实例

    axios.create([config])

    var instance = axios.create({
        baseURL:'http://some-domain.com/api/',
        timeout:1000,
        headers:{'X-Custom-Header':'foobar'}
    });
     

    实例方法

    下面列出了一些实例方法。具体的设置将在实例设置中被合并。

    axios#request(config)

    axios#get(url[,config])

    axios#delete(url[,config])

    axios#head(url[,config])

    axios#post(url[,data[,config]])

    axios#put(url[,data[,config]])

    axios#patch(url[,data[,config]])

    请求设置 
    以下列出了一些请求时的设置。只有 url 是必须的,如果没有指明的话,默认的请求方法是 GET .

    {
        //`url`是服务器链接,用来请求用
        url:'/user',
    
        //`method`是发起请求时的请求方法
        method:`get`,
    
        //`baseURL`如果`url`不是绝对地址,那么将会加在其前面。
        //当axios使用相对地址时这个设置非常方便
        //在其实例中的方法
        baseURL:'http://some-domain.com/api/',
    
        //`transformRequest`允许请求的数据在传到服务器之前进行转化。
        //这个只适用于`PUT`,`GET`,`PATCH`方法。
        //数组中的最后一个函数必须返回一个字符串,一个`ArrayBuffer`,或者`Stream`
        transformRequest:[function(data){
            //依自己的需求对请求数据进行处理
            return data;
        }],
    
        //`transformResponse`允许返回的数据传入then/catch之前进行处理
        transformResponse:[function(data){
            //依需要对数据进行处理
            return data;
        }],
    
        //`headers`是自定义的要被发送的头信息
        headers:{'X-Requested-with':'XMLHttpRequest'},
    
        //`params`是请求连接中的请求参数,必须是一个纯对象,或者URLSearchParams对象
        params:{
            ID:12345
        },
    
        //`paramsSerializer`是一个可选的函数,是用来序列化参数
        //例如:(https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
        paramsSerializer: function(params){
            return Qs.stringify(params,{arrayFormat:'brackets'})
        },
    
        //`data`是请求提需要设置的数据
        //只适用于应用的'PUT','POST','PATCH',请求方法
        //当没有设置`transformRequest`时,必须是以下其中之一的类型(不可重复?):
        //-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams
        //-仅浏览器:FormData,File,Blob
        //-仅Node:Stream
        data:{
            firstName:'fred'
        },
        //`timeout`定义请求的时间,单位是毫秒。
        //如果请求的时间超过这个设定时间,请求将会停止。
        timeout:1000,
    
        //`withCredentials`表明是否跨域请求,
        //应该是用证书
        withCredentials:false //默认值
    
        //`adapter`适配器,允许自定义处理请求,这会使测试更简单。
        //返回一个promise,并且提供验证返回(查看[response docs](#response-api))
        adapter:function(config){
            /*...*/
        },
    
        //`auth`表明HTTP基础的认证应该被使用,并且提供证书。
        //这个会设置一个`authorization` 头(header),并且覆盖你在header设置的Authorization头信息。
        auth:{
            username:'janedoe',
            password:'s00pers3cret'
        },
    
        //`responsetype`表明服务器返回的数据类型,这些类型的设置应该是
        //'arraybuffer','blob','document','json','text',stream'
        responsetype:'json',
    
        //`xsrfHeaderName` 是http头(header)的名字,并且该头携带xsrf的值
        xrsfHeadername:'X-XSRF-TOKEN',//默认值
    
        //`onUploadProgress`允许处理上传过程的事件
        onUploadProgress: function(progressEvent){
            //本地过程事件发生时想做的事
        },
    
        //`onDownloadProgress`允许处理下载过程的事件
        onDownloadProgress: function(progressEvent){
            //下载过程中想做的事
        },
    
        //`maxContentLength` 定义http返回内容的最大容量
        maxContentLength: 2000,
    
        //`validateStatus` 定义promise的resolve和reject。
        //http返回状态码,如果`validateStatus`返回true(或者设置成null/undefined),promise将会接受;其他的promise将会拒绝。
        validateStatus: function(status){
            return status >= 200 && stauts < 300;//默认
        },
    
        //`httpAgent` 和 `httpsAgent`当产生一个http或者https请求时分别定义一个自定义的代理,在nodejs中。
        //这个允许设置一些选选个,像是`keepAlive`--这个在默认中是没有开启的。
        httpAgent: new http.Agent({keepAlive:treu}),
        httpsAgent: new https.Agent({keepAlive:true}),
    
        //`proxy`定义服务器的主机名字和端口号。
        //`auth`表明HTTP基本认证应该跟`proxy`相连接,并且提供证书。
        //这个将设置一个'Proxy-Authorization'头(header),覆盖原先自定义的。
        proxy:{
            host:127.0.0.1,
            port:9000,
            auth:{
                username:'cdd',
                password:'123456'
            }
        },
    
        //`cancelTaken` 定义一个取消,能够用来取消请求
        //(查看 下面的Cancellation 的详细部分)
        cancelToke: new CancelToken(function(cancel){
        })
    }

    返回响应概要 Response Schema 
    一个请求的返回包含以下信息

    {
        //`data`是服务器的提供的回复(相对于请求)
        data{},
    
        //`status`是服务器返回的http状态码
        status:200,
    
    
        //`statusText`是服务器返回的http状态信息
        statusText: 'ok',
    
        //`headers`是服务器返回中携带的headers
        headers:{},
    
        //`config`是对axios进行的设置,目的是为了请求(request)
        config:{}
    }

    使用 then ,你会得到下面的信息

    axios.get('/user/12345')
        .then(function(response){
            console.log(response.data);
            console.log(response.status);
            console.log(response.statusText);
            console.log(response.headers);
            console.log(response.config);
        });

    使用 catch 时,或者传入一个 reject callback 作为 then 的第二个参数,那么返回的错误信息将能够被使用。

    默认设置(Config Default) 
    你可以设置一个默认的设置,这设置将在所有的请求中有效。

    全局默认设置 Global axios defaults

    axios.defaults.baseURL = 'https://api.example.com';
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';
    

    实例中自定义默认值 Custom instance default

    //当创建一个实例时进行默认设置
    var instance = axios.create({
        baseURL:'https://api.example.com'
    });
    
    //在实例创建之后改变默认值
    instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

    设置优先级 Config order of precedence 
    设置(config)将按照优先顺序整合起来。首先的是在 lib/defaults.js 中定义的默认设置,其次是 defaults 实例属性的设置,最后是请求中 config 参数的设置。越往后面的等级越高,会覆盖前面的设置。

    看下面这个例子:

    //使用默认库的设置创建一个实例,
    //这个实例中,使用的是默认库的timeout设置,默认值是0。
    var instance = axios.create();
    
    //覆盖默认库中timeout的默认值
    //此时,所有的请求的timeout时间是2.5秒
    instance.defaults.timeout = 2500;
    
    //覆盖该次请求中timeout的值,这个值设置的时间更长一些
    instance.get('/longRequest',{
        timeout:5000
    });

    nterceptors 
    你可以在 请求 或者 返回 被 then 或者 catch 处理之前对他们进行拦截。

    //添加一个请求拦截器
    axios.interceptors.request.use(function(config){
        //在请求发送之前做一些事
        return config;
    },function(error){
        //当出现请求错误是做一些事
        return Promise.reject(error);
    });
    
    //添加一个返回拦截器
    axios.interceptors.response.use(function(response){
        //对返回的数据进行一些处理
        return response;
    },function(error){
        //对返回的错误进行一些处理
        return Promise.reject(error);
    });

    如果你需要在稍后移除拦截器,你可以:

    var myInterceptor = axios.interceptors.request.use(function(){/*...*/});
    axios.interceptors.rquest.eject(myInterceptor);

    你可以在一个axios实例中使用拦截器

    var instance = axios.create();
    instance.interceptors.request.use(function(){/*...*/});

    错误处理 Handling Errors

    axios.get('user/12345')
        .catch(function(error){
            if(error.response){
                //存在请求,但是服务器的返回一个状态码
                //他们都在2xx之外
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
            }else{
                //一些错误是在设置请求时触发的
                console.log('Error',error.message);
            }
            console.log(error.config);
        });

    你可以使用 validateStatus 设置选项自定义HTTP状态码的错误范围。

    axios.get('user/12345',{
        validateStatus:function(status){
            return status < 500;//当返回码小于等于500时视为错误
        }
    });
    

    取消 Cancellation 
    你可以使用 cancel token 取消一个请求

    axios的cancel token API是基于cnacelable promises proposal,其目前处于第一阶段。

    你可以使用 CancelToke.source 工厂函数创建一个cancel token,如下:

    var CancelToke = axios.CancelToken;
    var source = CancelToken.source();
    
    axios.get('/user/12345', {
        cancelToken:source.toke
    }).catch(function(thrown){
        if(axiso.isCancel(thrown)){
            console.log('Rquest canceled', thrown.message);
        }else{
            //handle error
        }
    });
    
    //取消请求(信息参数设可设置的)
    source.cancel("操作被用户取消");

    你可以给 CancelToken 构造函数传递一个executor function来创建一个cancel token:

    var CancelToken = axios.CancelToken;
    var cancel;
    
    axios.get('/user/12345', {
        cancelToken: new CancelToken(function executor(c){
            //这个executor 函数接受一个cancel function作为参数
            cancel = c;
        })
    });
    
    //取消请求
    cancel();

    注意:你可以使用同一个cancel token取消多个请求。

    使用 application/x-www-form-urlencoded 格式化 
    默认情况下,axios串联js对象为 JSON 格式。为了发送 application/x-wwww-form-urlencoded 格式数据,

    你可以使用一下的设置。

    浏览器 Browser 
    在浏览器中你可以如下使用 URLSearchParams API:

    var params = new URLSearchParams();
    params.append('param1','value1');
    params.append('param2','value2');
    axios.post('/foo',params);

    注意: URLSearchParams 不支持所有的浏览器,但是这里有个 垫片

    (poly fill)可用(确保垫片在浏览器全局环境中)

    其他方法:你可以使用 qs 库来格式化数据。

    var qs = require('qs');
    axios.post('/foo', qs.stringify({'bar':123}));

    Node.js 
    在nodejs中,你可以如下使用 querystring :

    var querystring = require('querystring');
    axios.post('http://something.com/', querystring.stringify({foo:'bar'}));

    ​​​​​​​

    你同样可以使用 qs 库。

    promises

    axios 基于原生的ES6 Promise 实现。如果环境不支持请使用 垫片 .

     

    展开全文
  • vue axios前后端数据交互问题(2)

    千次阅读 2018-06-18 21:26:04
    本篇解决的问题如下:问题:1、后台获取前端数据的值; 2、前端渲染接收到的后台的值; 3、在axios中this的指向问题。1、后台获取到前台的值,首先在main.js中配置以下文件import axios from 'axios'import qs ...

    前一篇的介绍中遗留了几个问题,而且部分内容即success、error那部分有误,具体内容以本篇的为主。本篇解决的问题如下:

    问题:1、后台获取前端数据的值;

             2、前端渲染接收到的后台的值;

             3、在axios中this的指向问题。

    1、后台获取到前台的值,首先在main.js中配置以下文件

    import axios from 'axios'

    import qs from 'qs'

    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

    Vue.prototype.$qs = qs

    Vue.prototype.$ajax = axios
    axios.interceptors.request.use((config) => {
        config.data = qs.stringify(config.data);
        return config;
    }, function(error) {
        return Promise.reject(error);
    });

    2、前端渲染接收到的后台的值

      (1) 在data中定义一个:

        errorinfo:'',

      (2)在调用axios接收后台返回的值的地方使用this.errorinfo="后台获取的值"

     完成上述步骤后会出现一个this的指向问题,接着看3的解决办法。

    3、在axios中this的指向问题

       要使在axios中的this指向这个vue中的 errorinfo,就要采用ES6的语法=>来写接收成功的那一部分内容。

    完整的例子如下:

    <span class="error_tip">{{errorinfo}}</span> 

    <div class="form_item">

    <input type="text" :style="test"  v-model="user" placeholder="请输入帐号" @blur="validataPhone(user)"/>

    </div>

    data中的数据:

          return {user:'',errorinfo:''}

    method中调用的方法:

          this.$ajax({

                        method: 'post',
                        url : "http://IP:8088/demo/user/login.do",
                        data : {
                            "后台的值": 前台的值
                        }

                    })//   如果直接在里面访问 this,无法访问到 Vue 实例,this指向发生了变化。建议使用箭头函数,下面有讲

                    //请求成功后执行then

            .then((response)=> {

           console.log(response);   //处理后台返回的数据
           var result = response ;
           var id=result.data.data.id; //获取对应的数据,赋值给id
            this.errorinfo=id;   // 将id的值给指向这个vue实例的errorinfo,实现页面的渲染

        })

                   //请求失败后执行catch

       .catch(function(err){
           console.log(err)
        }) ;

     


    展开全文
  • axios:基于promise的HTTP库 首先使用vue-cli脚手架搭建基础单页项目 在目标文件夹打开终端输入以下命令以创建基础单页项目: (默认已安装npm) # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于...
  • 主要介绍了Vue-CLI项目-axios模块前后端交互的使用详解(类似ajax提交),本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue界面在前后端交互的过程中使用的是AJAX的方式来进行的数据交互,我们一般来说使用较多的是Vue-resource 以及 axios 这俩个组件来实现Vue前后端交互。但是在Vue1.0中官方推荐使用vue-resource,在Vue2.0的时候...
  • 主要介绍了vueaxios实现数据交互与跨域问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 基本用法:axios.get('/adata') .then(ret=>{ data属性名固定的,用于获取后台响应的数据 console.log(ret.data) ) 可以通过params直接传参get方法,比较方便,也可以用delete axios.get('/adata'),{ ...
  • vue通过axios与后端交互(笔记)

    千次阅读 2019-05-29 22:18:57
    前端代码(示例):最后数据都存入index数组中 ...import VueAxios from 'vue-axios' Vue.prototype.axios=axios; Vue.use(VueAxios, axios); 其次:在需要的地方导入axios、在需要post数据的时候,导入qs...
  • axios 前后端数据交互

    千次阅读 2020-12-16 21:59:39
    一直纠结前后端该怎么实现数据交互,老想不通。关键还是基础太差,看文档不认真。 1.前端显示数据的主要代码: display(){ Axios.get('/api/data-item').then(res=>{ console.log(res); this.data = res....
  • axios 介绍 Github跳转地址 基于promise用于浏览器和node.js的http客户端 支持浏览器和node.js 支持promise 能拦截请求和响应 自动转换JSON数据 能转换请求和响应数据 注意:拿到 ret 是一个对象 所有的对象都存在...
  • vue目前流行的是使用第三方的axios与后台进行数据交互 axios的介绍及基本用法参考:https://blog.csdn.net/u011054333/article/details/78118948   以下是我整理的参考使用步骤 1,先全局安装axios npm ...
  • 使用axios +vue php 实现前后端分离数据交互 ** 环境配置: PhpStorm(php环境) vue(webstorm) axios是个啥有啥作用 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从...
  • 前后端交互总结 及 axios 使用
  • Vue前后端交互~非常详细哦~

    千次阅读 2021-01-25 21:28:42
    能够说出什么是前后端交互模式 能够说出Promise的相关概念和用法 能够使用fetch进行接口调用 能够使用axios进行接口调用 能够使用async/await方式调用接口 能够基于后台接口实现案例 目录 前后端交互模式 Promise...
  • Vue 前后端交互

    千次阅读 2019-02-20 16:52:44
    Vue界面在前后端交互的过程中使用的是AJAX的方式来进行的数据交互,我们一般来说使用较多的是Vue-resource 以及 axios 这俩个组件来实现Vue前后端交互vue-resource 和 axios 的共性及区别 共性: 1....
  • 有很多教程都是面对后端想前端传递的数据,当遇到了前端想后端发送数据时,很多教程却有点儿麻烦。几经探索,我找到了一条适合自己发展的ssm 特色之路。现在给大家分享分享。 前端代码 // 用户注册 export function ...
  • 本篇文章主要介绍了vue结合axios与后端进行ajax交互的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 三、vue前后端交互(轻松入门vue

    万次阅读 多人点赞 2020-06-12 16:26:51
    Vue前后端交互六、Vue前后端交互1. 前后端交互模式2. Promise的相关概念和用法Promise基本用法**then参数中的函数返回值**基于Promise处理多个Ajax请求demoPromise常用API3. fetch进行接口调用fetch基本用法fetch...
  • vue前后端交互

    2020-09-21 11:32:17
    1.前后端交互模式 (1)接口调用方式 原生ajax 基于jq的ajax fetch axiosvue中常用的是fetch和axios,通过url传输数据 (2)URL地址格式 Restful形式的url http请求方式:GET(查询)、 POST(添加)、...
  • vue 本身是不支持 ajax 接口请求的,所以我们需要安装一个接口请求的 npm 包,来使我们的项目拥有这个功能。支持 ajax 的工具有很多。一开始,我使用的是 vue-resource这个工具。但是我后来发现其开发人员在一年就...
  • Vue前后端交互

    2020-07-20 17:32:19
    响应拦截器 axios.interceptors.response.use(function(res) {}, function(err)}) 第一个函数在这里对返回的数据进行处理 第二个函数为错误处理 接口调用 async/await用法 await后面跟promise实例对象 处理异步...
  • Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子...
  • 安装 vue cli npm install -g @vue/cli npm uninstall -g @vue/cli npm install -g @vue/cli@3.11.0 创建项目 使用vue cli 脚手架创建一个vue的项目, CMD输入一下命令之后,vue 会自动帮助我们下载项目所需要的...
  • 在浏览器和 node 都可以使用。 支持 Promise API。 支持请求和响应拦截。 响应数据自动转换 JSON 数据。 支持请求取消。 可以批量发送多个请求。 客户端支持安全保护,免受 XSRF 攻击。 三、axios API
  • Axios是一个开源的可以用在浏览器和NodeJS的异步通信框架,它的主要作用就是实现Ajax异步通信。 1.安装axios npm install axios vue-axios --save 2.在main.js中引入axios import axios from 'axios' Vue.config...
  • Vue与服务端数据交互 [ axios ]

    千次阅读 2019-05-23 20:30:29
    Vue生命周期 每个Vue实例在被创建到销毁要经过一系列的过程,这整个过程称为Vue实例的生命周期 ...在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用 created 在实例创建完成...
  • vue与php通过axios进行数据交互

    千次阅读 2019-06-22 21:56:13
    现在进行测试,vue与php进行post数据交互 数据提交" @click="post"> import axios from "axios" import qs from "qs" var json={ "number":"123456789" }; var params = 'ajax='+...
  • 前后端数据交互 数据请求在vue中有多种方式 1.原生或者jquery的ajax 2.vue-resource vue官方出品 vue2x之后已经停止更新了 3.axios 是一个第三方的数据请求 他是基于XHr对象的 但是在XHR对象之上使用promise进行...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,476
精华内容 3,790
关键字:

vue前后端数据交互axios

vue 订阅