Axios安装及基础使用

1.使用 json-server 搭建

https://github.com/typicode/json-server

• 安装json-server  npm install -g json-server

• 创建一个 db.json 文件放入以下内容

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

• 启动服务：json-server --watch db.json

注意：执行此命令时，命令行所在位置必须定位在db.json所在文件夹下，否则会启动失败

•  创建完成

 

 

 2. Axios：Promise based HTTP client for the browser and node.js

基于 promise 的 http 客服端 可以在浏览器和 node.js 两个环境中运行

axios特点：

• 从浏览器发出 XMLHttpRequests
• 从 node.js 发出 http 请求
• 支持承诺 API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• JSON 数据的自动转换
• 自动数据对象序列化和正文编码 multipart/form-datax-www-form-urlencoded
• 客户端支持针对 XSRF 进行保护

3.axios安装

•  使用npm安装 axios：npm install axios

此处我使用CDN的方式：在html中引入

也可使用国内版的， 网址： https://www.bootcdn.cn/

进入后搜索axios，选择一个版本进行复制，直接引入到html中

 4. axios基本使用

• 使用 json-server 搭建一个虚假的后台
• 引入axios    
• 使用axios 的 get，post，put，delete 请求

 

        
基本使用
        发送GET请求
        发送POST请求
        发送PUT请求
        发送DELETE请求
    
    

 在添加、更新、删除数据时，db.js文件也会相应的修改

 5. axios的其他请求方式

        const btns = document.querySelectorAll('button')
        // 发送get请求
        btns[0].onclick = function () {
            // axios()
            axios.request({
                method: 'get',
                url: 'http://localhost:3000/comments'
            }).then(response => {
                console.log(response);
            })
        }
        // 发送post请求
        btns[1].onclick = function () {
            axios.post(
                'http://localhost:3000/comments', 
            {
                "body": '不错',
                "postId": 2
            }).then(response => {
                console.log(response);
            })
        }

6. 请求响应结果的结构

响应报文包括：响应行，响应空行，响应头，响应体

data: {},                   由服务器提供的响应
status: 200,             来自服务器响应的 HTTP 状态码
statusText: 'OK',      来自服务器响应的 HTTP 状态信息
headers: { },             http请求服务器响应的头
config: { },                为请求提供的配置信息
request: {  }              生成当前响应的请求