Ajax与Axios的区别

目录

1.Ajax与Axios的区别

2.mvvm模式下更适合这种数据

3.ajax书写形式

4.axios书写形式

5.vue 中使用的 axios 代码

总结:

---

1.Ajax与Axios的区别

Axios：axios：是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说就是axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有。
总结：一句话就是axios是ajax，ajax不止axios。

2.mvvm模式下更适合这种数据

• ajax（前端实现类拦截器这样的效果比较差，改动代码太多）

• axios 前后端分离比较好用

3.ajax书写形式

$.ajax({

　　　　url: '接口地址',

　　　　type: 'get', //或者post　　 请求类型

　　　　dataType: 'json',

　　　　data: { // 要发送的请求参数

　　　　　　'username' : 'admin',

　　　　　　'password' : '密码'

　　　　},

　　　　success : function (response) {

　　　　　　console.log(response); // 请求返回的数据

　　　　}

　　})

4.axios书写形式

　axios({

　　　　url: '接口地址',

　　　　method: 'get', //或者 post    请求类型

　　　　responseType: 'json', //默认格式，如果就是 json 格式可以不写

　　　　data: {

　　　　　　'username' : 'admin',

　　　　　　'password' : '密码'

　　　　}

　　}).then( function(response){ // 请求正确返回的数据

　　　　console.log(response);

　　　　console.log(response.data);

　　}).catch( function(error) { // 请求错误返回的数据

　　　　console.log(error);

　　})

5.vue 中使用的 axios 代码

btn(value){
　　　　let postData = qs.stringify({
　　　　　　name: value
　　　　})
　　　　let api = 'http://tp.xxxxxx';
　　　　axios.post(api, postData)
　　　　.then(function(res) { //请求成功返回的数据
　　　　　　console.log('==00000',res.data.code);
　　　　})
　　　　.catch(function(err){
　　　　　　console.log('err==>>', err); //请求失败返回的数据
　　　　})
　　}

总结:

• ajax提供了最原生的方法，但是现在都不用它了，有种教会徒弟饿死师傅的感觉
• axios更好的实现了异步请求
• 起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)————推荐文档