乐趣区

关于javascript:axios基础

jiezi

学习 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';// 设置默认的申请类型为 GET
axios.defaults.baseURL = 'http://localhost:3000';// 设置根底 URL
axios.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))
退出移动版