发送请求的方法

一，jQuery中的请求

设置的jQuery的服务：

1.1 get 请求
$.get(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text, _default，返回的数据默认是字符串
举例：

 $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);//响应体中的内容
            },'json');//转换成json数据类型

1.2 post 请求
$.post(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text, _default，返回的数据默认是字符串
举例：

 $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);//响应体中的内容
            },'json');//转换成json数据类型

1.3 jQuery中的ajax请求
通过$.ajax方法可以发送一切请求
使用方式：
$.ajax(options)
options: 是一个配置对象，包含以下属性：

url: 要请求的目标地址
data: 携带的数据
type:请求的类型
dataType: 响应体结果的类型
success: 是一个函数，当请求成功的时候执行的回调函数
error: 是一个函数，当请求失败的时候执行的回调函数
timeout:超时时间
headers:头信息
contentType: 布尔值，指示本次请求是否通过设置content-type字段
processData: 布尔值，指示本次请求是否通过jQuery将数据序列化

$.ajax({
                //url
                url: 'http://127.0.0.1:8000/jquery-server',
                //参数
                data: {a:100, b:200},
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功的回调
                success: function(data){
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function(){
                    console.log('出错啦!!');
                },
                //头信息
                headers: {
                    c:300,
                    d:400
                }
            });

二 ，axios 发送 请求

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，简单的理解就是ajax的封装。

2.1首先要引入axios这个库：

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>

2.2axios 常用语法
axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定 url 发 get 请求
axios.request(config): 等同于 axios(config)
axios.get(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]): 发 post 请求
axios.put(url[, data, config]): 发 put 请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

2.3 axios中的get请求
设置的axios的服务：

 //GET 请求
            axios.get('/axios-server', {
                //url 参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'atguigu',
                    age: 20
                }
                //返回一个对象，包含响应体，响应头，等
            }).then(function(value) {
                console.log(value);
            });

结果：

2.4 axios中的post请求
axios.post(url[, data, config])
注意：第二个参数为请求体数据
举例：

axios.post('/axios-server', {
                username: 'admin',
                password: 'admin'
            }, 
            {
                //url 
                params: {
                    id: 200,
                    vip: 9
                },
                //请求头参数
                headers: {
                    height: 180,
                    weight: 180,
                }
            });

2.5 axios中发任意类型请求的方式

axios({
                //请求方法
                method : 'POST',
                //url
                url: '/axios-server',
                //url参数
                params: {
                    vip:10,
                    level:30
                },
                //头信息
                headers: {
                    a:100,
                    b:200
                },
                //请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then(function(response){
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })

结果：