axios-基础

学习axios以前能够先搭建一个模拟数据请求服务器：
1、json-server服务器搭建
GitHub:https://github.com/typicode/j...
一、下载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" }
}

三、在db.json同级目录下执行以下命令

json-server --watch db.json

经过访问提供给咱们的连接，可以模拟获得请求数据；
例如地址栏访问：

http://localhost:3000/posts

能够获得以下数据

2、axios简介

https://github.com/axios/axios

axios是一个基于node的HTTP客户端，能够在浏览器端向服务器发送ajax请求，也能够在node端向远端服务发送http请求。
特色：
一、能够在浏览器make XMLHTTPRequests
二、能够在node端发送http请求
三、支持Promise API
四、请求响应拦截器
五、对请求和相应数据作转换
六、取消请求
七、自动将请求数据转换成json数据
八、客户端支持防护XSRF

3、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>

4、axios基本使用
一、发起一个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" }]
    })
}

二、发起一个POST请求

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

5、axios的方法
一、axios.request(config)--与axios()的使用方法一致。
二、axios.get(url[,config])--发送GET请求，通常用于获取数据
三、axios.post(url[,data,config])--发送POST请求，通常用于提交数据和上传文件。
四、axios.delete(url[,config])--发送DELETE请求，参数能够放在url上也能够和post同样放在请求体中。
五、axios.put(url[,data,config]])--发送PUT请求，对数据所有进行更新。

6、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'
        }
  },
    ...
}

7、axios的默认配置

axios.defaults.method = 'GET';//设置默认的请求类型为GET
axios.defaults.baseURL = 'http://localhost:3000';//设置基础URL
axios.defaults.timeout = 30000;//设置超时时间

axios({
    url: '/posts'
}).then(res=>{
    console.log(res)
})

8、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))