axios和ajax使用、axios和ajax区别

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。它最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

axios是通过es6的promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。我们使用ajax也是使用jQuery封装的Ajax，极少使用原生的Ajax。话不多说，直接上菜。

axios使用

//安装
npm install axios -S

//导入
import axios from "axios";

直接使用，get请求参数为params，post请求参数为data。

 axios({
        url: 'http://127.0.0.1:8000/',                 //1、请求地址
        method: 'get',                                 //2、请求方法
        params: params,                                //3、get请求参数
        })
        // 2、回调函数
        .then(res => {
         console.log(res);
         })
         // 3、捕获异常
         .catch(err => {
           console.log(err);
         });
       }

axios二次封装

创建request.js，导入axios，创建全局axios实例

export function request(config){
    //创建axios实例
        const instance = axios.create({
        baseURL: 'http://127.0.0.1:8000/',
        timeout: 5000,
        // headers: header  
        })
        //axios拦截器
        //axios拦截器
        //请求拦截
        instance.interceptors.request.use(config => {
            return config
        },err => {
            console.log(err);
        })
        //响应拦截
        instance.interceptors.response.use(res => {
            return res.data
        },err => {
            console.log(err);
        })
        //发送网络请求
        return instance(config)
}

创建api.js，导入request，创建请求方法

import {request} from './request'

export function getdata(params) {
    return request({ 
        url:'/api/data',
        method: 'GET',
        params
    })
}

发送请求，获取数据

import {getdata} from "../../api.js"

mounted(){
    getdata(params)
    .then(res => {
        console.log(res);
    })
    .catch(err => {
       console.log(err);
    });
}

axios有请求拦截器和响应拦截器，我们可以在请求前加上全局需要的字段或者是设定动画等等，也可以在响应拦截器里面处理跟后端约定好的各种code。

使用axios，一般都会进行二次封装使用，方便管理。

ajax使用

一般用Ajax的时候是这样使用的：

$.ajax({
    type:'get',            //或post
    url:url,
    data:{},
    //dataType: ''        //预期后端返回数据类型：json、xml、html等
    success:function(data) {
    },
    error:function() {
        
    },
    complete:function() {

    },
})

使用Ajax很少再封装使用，都是直接使用。

下面是简单封装的ajax：

const apiurl = function (url) {
                return '' + url;
            }
            const ajaxConnect = (type,url,data,callBack) => {

            var data = data || {};
            $.ajax({
                type:type,
                url:apiurl(url),
                data:data,
                success:function (data) {
                if(data.code == 10000){

                }else{

                    callBack(data.data);

                }       

                },
                error:function (data) {
                    
                }
            })
        };

调用时：

ajaxConnect('post','','',function (data) {
    
})

Ajax除了这些参数之外还有好多，比如穿文件、同步还是异步等等，需要的话可以封装上去，但是个人认为那些用的少的，需要用到的时候重新写一个Ajax会更好。

ajax：

1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮

2.基于原生的XHR开发，XHR本身的架构不清晰。

3.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

axios：

1.从浏览器中创建 XMLHttpRequest

2.支持 Promise API

3.客户端支持防止CSRF

4.从 node.js 创建 http 请求

5.拦截请求和响应

6.转换请求和响应数据

7.自动转换JSON数据

描述如有错误，欢迎指正！

axios和ajax使用、axios和ajax区别

猜你喜欢