axios入门篇这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战一、axios简介 Axios 是一个基于

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

一、axios简介

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。本质其实就是ajax请求。

二、axios功能特点

在浏览器中发送XMLHttpRequests请求
在node.js中发送http请求
支持promise API
拦截请求和响应
转换请求数据和响应数据
批量发送多个请求
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

对于这些功能特点的话，没有必要去死记硬背，在后面的实践中可以慢慢体会到。

三、安装

npm安装：

npm install axios

cdn引入：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

四、搭建环境

为了更好的操作,我们首先创建一个测试端口和数据。

全局安装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" }
}

3.运行json文件

json-server --watch db.json

4.打开网址,可以对里面数据进行请求

http://localhost:3000

5.然后创建一个基本的html文件，cdn引入axios,这里我创建了几个按钮，方便对数据进行操作

<div>
        <button onclick="getData()">get</button>
        <button onclick="postData()">post</button>
        <button onclick="deleteData()">delete</button>
        <button onclick="putData()">put</button>
</div>

五、axios API

axios有两种请求的方式，axios作为函数执行发送请求，还有一种是调用方法。

axios(config)
axios(url[, config])

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

执行get请求：

//这里都使用了两种方法请求
function getData(){
    //  axios.get('http://localhost:3000/posts?id=1').then(res=>{
    //      console.log(res.data)
   //     }).catch(err=>{
   //        console.log(err.data)
   //     })
    
    //没有指定method时，默认方法为get
    axios({
        url:"http://localhost:3000/posts",
        params:{
            id:1
        }
    }).then(res=>{
        console.log(res.data)
    })
}

执行post请求：

function postData(){
    // axios({
    // 	url:"http://localhost:3000/posts",
    // 	method:'post',
    // 	data:{
    // 		title: "json-server2",
    // 		author: "typicode2"
    // 	}
    // }).then(res=>{
    // 	console.log(res.data)
    // })

    axios.post('http://localhost:3000/posts',{"title": "json-server2","author": "typicode2"})
    .then(res=>{
            console.log(res.data)
    })
}

可以在db.json文件中看到新增的数据

执行delete请求

//可以指定默认路径
axios.defaults.baseURL="http://localhost:3000"
function deleteData(){
    // axios({
    // 	url:"/posts/2",
    // 	method:"delete",

    // }).then(res=>{
    // 	console.log(res.data)
    // }).catch(err=>{
    // 	console.log(err)
    // })
    
    axios.delete('/posts/2').then(res=>{
        console.log(res.data)
    },err=>{
        console.log(err.data)
    })
}

其他的方法可以自己去测试，自己多写掌握得也会更快。

六、设置默认值

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';

七、创建实例axios.create()

const instance=axios.create({
    baseURL:"http://localhost:3000",
    timeout:3000,		
})
function getData(){
    instance.get('/posts')
    .then(res=>{
        console.log(res.data)
    })
}

根据指定配置创建一个新的实例,对于每个instance的话它都可以有自己独立的配置
instance实际上是一个request函数，与axios本质相同，但是也有一定的区别，它没有取消请求和批量发送请求的方法
应用场景：

需求：项目中有部分接口需要的配置与另一部分接口需要的配置不太一样

解决：创建两个新的instance,每个都有自己特有的配置，分别应用到不同要求的接口请求中

写在后面

本篇文章主要是对一些axios的基本请求及实践操作，下一篇会涉及到拦截器、取消请求及简单的源码分析。axios升级篇(码住！)