学习axios之前能够先搭建一个模仿数据申请服务器：
一、json-server服务器搭建
GitHub:https://github.com/typicode/j...
1、下载json-server

npm install -g json-server

2、创立一个db.json复制如下代码

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

3、在db.json同级目录下执行如下命令

json-server --watch db.json


通过拜访提供给咱们的链接，可能模仿失去申请数据；
例如地址栏拜访：

http://localhost:3000/posts

能够失去如下数据

二、axios简介

https://github.com/axios/axios

axios是一个基于node的HTTP客户端，能够在浏览器端向服务器发送ajax申请，也能够在node端向远端服务发送http申请。
特点：
1、能够在浏览器make XMLHTTPRequests
2、能够在node端发送http申请
3、反对Promise API
4、申请响应拦截器
5、对申请和相应数据做转换
6、勾销申请
7、主动将申请数据转换成json数据
8、客户端反对进攻XSRF

三、axios配置
配置办法有很多，个别我的项目中应用npm和yarn装置

npm install axios
yarn add axios

学习阶段能够应用CDN形式间接应用script标签引入

<script src= 'http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'></script>

国内服务器能够应用bootcdn上的资源

<script src= 'https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js    '></script>

四、axios根本应用
1、发动一个GET申请

btn[0].onclick = ()=>{    axios({        method: 'GET',        url: 'http://localhost:3000/posts'    }).then(res=>{        console.log(res) //{data: Array(1), status: 200, statusText: "OK", headers: {…}, config: {…}, …}        console.log(res.data)//[{ "id": 1, "title": "json-server", "author": "typicode" }]    })}

2、发动一个POST申请

btn[1].onclick = ()=>{    axios({        method: 'POST',        url: 'http://localhost:3000/posts',        data: {            title: 'Hello Axios',            author: 'Liane'        }    }).then(res=>{        console.log(res)    })}

五、axios的办法
1、axios.request(config)--与axios()的应用办法统一。
2、axios.get(url[,config])--发送GET申请，个别用于获取数据
3、axios.post(url[,data,config])--发送POST申请，个别用于提交数据和上传文件。
4、axios.delete(url[,config])--发送DELETE申请，参数能够放在url上也能够和post一样放在申请体中。
5、axios.put(url[,data,config]])--发送PUT申请，对数据全副进行更新。

六、Request Config
config中可设置如下参数：

{    url: '/posts', //设置申请门路    method: 'get', //default,设置申请类型    baseURL: 'http://localhost:3000', //设定申请的协定和域名等根底构造，在发动申请时会主动拼接url参数的门路    transformRequest:[ //对申请的数据在发动申请前做预处理        (data,headers)=>{            return data        }    ],    transformResponse:[ //对申请响应后果做预处理        (data)=>{            return data        }    ],    headers: {'X-Requested-Width','XMLHttpRequest'},//配置申请头信息    params: { //设定url参数--http://localhost:3000/index/ID:12345        ID: 12345    },    paramsSerializer: (data)=>{//params参数序列号        return Qs.stringify(params,{arrayFormat:'brackets'})    },    data: {  //申请体设置为对象，申请发动时会主动转成json格局        firstName: 'Fred'    },    data: 'Country=Barasil&City=Belo',//申请体设置为字符串，会间接发动申请    timeout: 1000,//超时工夫，若申请发动超过这个工夫，则申请会勾销，单位为ms    widthCredentials: false, //在跨区申请时对cookie的携带做设置，值为false示意不携带cookie    adapter: (data)=>{ //对申请的适配器做设置-设置发送ajax或者在node中发送http申请        /*...*/    },    auth: {        username:'janedoe',        password: 's00pers3crept'    },    responseType: 'json',    responseEncoding: 'utf8',    xsrfCookieName: 'XSRF-TOKEN', // 跨站申请标识，对cookie名字做设置。    proxy: { //代理        protocol: 'https',        host: '127.0.0.1',        port: 9000,        auth: {            username: 'mikeymike',            password: 'rapunz3l'        }  },    ...}

七、axios的默认配置

axios.defaults.method = 'GET';//设置默认的申请类型为GETaxios.defaults.baseURL = 'http://localhost:3000';//设置根底URLaxios.defaults.timeout = 30000;//设置超时工夫axios({    url: '/posts'}).then(res=>{    console.log(res)})

八、axios创立实例对象发送申请
在理论开发中，可能有多个服务器别离解决不同的申请，因而能够针对不同的服务器创立不同的axios实例
语法：axios.create()

cosnt myAxios1 = axios.create({    baseURL: 'http://xxxx/xxx',    timeout: 2000})//能够间接调用myAxios1({url: '/xxx'}).then(res=>console.log(res))//也能够应用axios的办法调用myAxios1.get('/xxx').then(res=>console.log(res))